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