日期:2014-05-16 浏览次数:20455 次
蛋疼菊紧,写了个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";
}
}
}
}
?
各位大爷轻拍。
?