HTML/CSS部分：
我的结构是这么写的：
每个选项的内容被嵌套在选项卡里。
ul li div。
ul是那个选项卡盒子，当然你还可以在上面弄个div什么的。
li当然是选项卡的选项咯。
div当然是每个选项显示出来的内容咯。根据语义化，这里的div视情况而定。比如选项内容是新闻列表时，这里可以就是li咯。
或者直接使用 dl dt dl 。
也可以使用不嵌套的方式。比如：
ul li 这是选项卡。
ul li 这是选项呀里面的内容。
使用样式把选项卡和内容黏合在一起去。
下面是每个选项内容嵌套在在相应选项卡下的HTML/CSS。
<!-- Author: XiaoWen Create a file: 2016-12-07 09:04:12 Last modified: 2016-12-07 09:46:08 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style> ul,li{ margin: 0; padding: 0; list-style: none; } ul{ width: 300px; height: 150px; background: #ccc; overflow: hidden; position: relative; } ul li{ width: 100px; height: 30px; line-height: 30px; float: left; text-align: center; background: #ddd; } ul div{ position: absolute; width: 300px; left: 0; top: 30px; height: 120px; background: #eee; text-align: left; } </style> </head> <body> <script> //代码在下面... </script> </body> </html>
JS代码：
之前的练习里有个方法，就是“显示要显示的，隐藏所有不显示的”，这个观念这里可以用到。比如把先通过for遍历全部隐藏掉，再把当前点击的div显示出来。
然后……我写出来就是这样的。因为例子里面只有一个div，所以直接用div[0]写了。频繁获取了div[0]，为了让代码看起来更简洁些，将其改为 div(Parent) 函数。
var li=document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ //隐藏其他li并添加点击事件 //li[i].getElementsByTagName("div")[0].style="display:none"; div(li[i]).style="display:none"; li[i].onclick=function(){ for(var j=0;j<li.length;j++){ //隐藏其他li //li[j].getElementsByTagName("div")[0].style="display:none"; div(li[j]).style="display:none"; } //显示点击的li //this.getElementsByTagName("div")[0].style="display:block"; div(this).style="display:block"; } } //默认要显示的选项（第一个li） //li[0].getElementsByTagName("div")[0].style="display:block"; div(li[0]).style="display:block"; //Parent父级元素 function div(Parent){ return Parent.getElementsByTagName("div")[0]; }
还想到其他方法……
但等我先把其他几个小例子忽悠好了再来补充吧。