选项卡
1、首先看下效果，如下图：
2、html结构
<div id="test">
<dl><dd>第一项</dd><dd>第二项</dd><dd>第三项</dd></dl>
<div>内容。。。</div>
</div>
3、javascript代码
创建一个Tab函数，你也可以叫它类（javascript没有类的概念）。
function Tab(id) {
this.obj = document.getElementById(id);
var dd = this.obj.getElementsByTagName("dd");
var divcont = this.obj.getElementsByTagName("div");
this.init = function () {
for (var i = 0; i < dd.length; i++) {
(function (i) {
var current = i;
dd[i].onclick = function () { //为每个dd绑定onclick事件
for (var n = 0; n < dd.length; n++) {
divcont[n].style.display = "none";
dd[n].style.background = "#FFFFFF";
}
divcont[current].style.display = "block";
dd[current].style.background = "#FF66FF";
}
})(i);
}
dd[0].style.background = "#FF66FF"; //加载时初始化
divcont[0].style.display = "block";
}
init();
}
4、css样式，根据实际需要进行调整
*{margin: 0px;padding: 0px;}
#tab{margin-top: 20px;margin-left: 20px; 500px;height: 300px;}
#tab dl{border-left: 1px solid #0000FF;overflow: hidden;}
#tab dd{float: left;height: 30px;line-height: 30px;padding-left: 10px;padding-right: 10px;border-top: 1px solid #0000FF;border-right: 1px solid #0000FF;background: #FFFFFF;cursor: pointer;}
#tab div{border: 1px solid #0000FF;display: none; 100%;height: 100%;}