JS 选项卡

<div id="wrapper">
<ul>
<li class="on">001</li><li>002</li><li>003</li><li>004</li>
</ul>
<div class="on">111</div>
<div class="jj">222</div>
<div class="jj">333</div>
<div class="jj">444</div>
</div>

<style>
*{margin:0;padding:0}
div#wrapper{margin:200px;width:350px;height:350px;borderd:1px solid;position:relative;border:1px solid}
ul{height:20%;width:100%;text-align:center;}
ul li{list-style:none;float:left;line-height:70px;width:25%;}
.on{background:#dcdcdc}
#wrapper div{height:80%;position:absolute;width:100%;top:20%;left:0;}
div.jj{display:none};      
</style>

<script>
var lists=document.getElementsByTagName("li");
var k=document.getElementById("wrapper");
var content=k.getElementsByTagName("div");
for(var i=0,len=lists.length;i<len;i++){
lists[i].index=i;
lists[i].onclick=function (){
for(var i=0,len=lists.length;i<len;i++){
lists[i].className="";
content[i].style.display="none";
}
this.className="on";
content[this.index].style.display="block";
content[this.index].style.background="#dcdcdc";
}
}
</script>

 

下面是运用css的target元素实现：

<div id="container">
<ul>
<li><a href="#div1">tab1</a></li>
<li><a href="#div2">tab2</a></li>
<li><a href="#div3">tab3</a></li>
</ul>
<div id="div1">222kk</div>
<div id="div2">811kkddd</div>
<div id="div3">kkdddddddddd</div>

</div>
<style>

#container{
border:1px  solid red;
width:650px;
height:200px;
position:relative;

}
ul{width:100%;height:35%;text-align:center;margin:0;padding:0}
li {float:left;border:1px  solid;width:100px;height:40px;line-height:40px}
a{text-decoration:none;display:block}
#container div{top:40px;
width:504px;height:65%;position:absolute;border:1px  solid;background:pink;border-top:none;
}

#div1:target,#div2:target,#div3:target{z-index:2}
</style>