蛋疼菊紧,写了个tab切换效果
<div id="wrap">
<div id="tab-title">
<ul>
<li class="focus">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
<div id="tab-content">
<ul>
<li>苍井空</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
</ul>
<ul>
<li>吉泽明步</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
</ul>
<ul>
<li>波多野结衣</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
<li>简易切换tab练习</li>
</ul>
</div>
</div>
* {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul,li {list-style-type:none;}
#wrap {margin:10px; width:400px;}
#tab-title ul {overflow:hidden; background:#000; padding:1px}
#tab-title li {float:left; display:block; color:#fff; padding:5px 0; width:100px; text-align:center; cursor:pointer;}
#tab-title li.focus {background:#ccc; color:#000;}
#tab-content {border:1px solid #000; border-top:none; padding:10px;}
#tab-content ul {display:none; line-height:1.8}
#tab-content ul:first-child {display:block;}
window.onload = function(){ var oLi = document.getElementById("tab-title").getElementsByTagName("li"); var oUl = document.getElementById("tab-content").getElementsByTagName("ul"); for(var i=0;i<oLi.length;i++){ oLi[i].index = i; oLi[i].onmouseover = function(){ for(var n=0;n<oLi.length;n++){ oLi[n].className = ""; this.className = "focus"; } for(var n=0;n<oUl.length;n++){ oUl[n].style.display = "none"; oUl[this.index].style.display = "block"; } } } }
各位大爷轻拍。