...列表内有几项,单机切换内容,并不跳转到另一个网页。
发布网友
发布时间：2024-08-19 18:14
共4个回答
热心网友
时间：2024-08-26 16:41
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
*{ margin: 0; padding: 0; }
.list {
float: left;
width: 10%;
}
li { list-style: none; }
ul { display: none; }
.active { display: block; }
</style>
</head>
<body>
<div class="list">
<h4>列表1</h4>
<ul class="active">
<li>列表1的内容</li>
<li>列表1的内容</li>
<li>列表1的内容</li>
</ul>
</div>
<div class="list">
<h4>列表2</h4>
<ul>
<li>列表2的内容</li>
<li>列表2的内容</li>
<li>列表2的内容</li>
</ul>
</div>
<script type="text/javascript">
$("h4").click(function(){
$(this).siblings("ul").addClass("active").parent().siblings().children("ul").removeClass("active");
})
</script>
</body>
</html>
用jquery可以比较简单的表示，思路是：把全部列表隐藏掉，然后设置一个active的样式显示列表，点击哪个列表，就给这个列表加上active这个样式，这样这个列表就会显示出来了，同时， 把另外那个列表去掉active这个样式，另一个列表就隐藏掉了。你就算有N个列表，也可以正常运行
热心网友
时间：2024-08-26 16:40
热心网友
时间：2024-08-26 16:42
热心网友
时间：2024-08-26 16:38
