菜鸟学JS-简易tab选项卡

蛋疼菊紧，写了个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";
			}
			}
	}
	}

 

各位大爷轻拍。