<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个列表，也可以正常运行
HTML中下拉列表框是一个可选列表。该列表的组成需要有select 以及其中的选项option组成。一个select中可以包含多个选项（option），每个option有一个value属性表示这个option的值，<option>展示文本</option>这对标签中间的“展示文本”是用于在下拉的时候展示的选项，其中的某一个option在选中以后，这个option的value就可以用于和后台交互进行逻辑处理。
以下是一个最简单的DEMO:
<HTML><HEAD>
<title>列表框演示</title>
</HEAD>
<BODY>
<form>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</BODY>
</HTML>
<table><tr><td></td><td><ul><li></li><li></li></ul></td></tr></table>直接在第一行第二列的td标签间插入ul. 如果有多行的话，可以把第二列多行合并。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）