JS选项卡

HTML内容

<div id="tab">
		<ul>
		<li class="on"><span>首页</span></li>
		<li class="off"><span>我要融资</span></li>
		<li class="off"><span>新手指南</span></li>
		</ul>
		<div class="show">页面1</div>
		<div class="hide">页面2</div>
		<div class="hide">页面3</div>
</div>

CSS样式 

.hide{
	display: none;
}
.show{
	display: block;
}

JS代码

 

// JS实现选项卡切换
	    window.onload = function(){
	    var myTab = document.getElementById("tab");    //整个div
	    var myUl = myTab.getElementsByTagName("ul")[0];//tab下的一个ul节点
	    var myLi = myUl.getElementsByTagName("li");    //ul下的li数组
	    var myDiv = myTab.getElementsByTagName("div"); //tab下的div数组
	
	
	    for(var i = 0; i<myLi.length;i++){  //对li数组进行循环
	        myLi[i].index = i;
	        myLi[i].onclick = function(){ //判断哪一个li标签被点击
	            for(var j = 0; j < myLi.length; j++){  //对li数组进行循环
	                myLi[j].className="off"; //所有li设置为off状态，即不被点击状态
	                myDiv[j].className = "hide";  //所有的div内容设置为hide状态，即隐蔽状态
	            }
	            this.className = "on"; //当前被点击的标签li设置为on，即被点击状态
	            myDiv[this.index].className = "show";  //当前标签的内容设置为show，即显示状态
	        }
	      }
	    }

搜索

复制