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>