js封装tab标签页实例分享
话不多说，请看代码
<html>
<head>
<title></title>
<metacharset="UTF-8">
<style>
*{padding:0;margin:0;}
.block{display:block;}
.none{display:none;}
#wrap,#wraps{width:500px;height:230px;overflow:hidden;margin:50pxauto;}
#tab1,#tab2{list-style:none;}
#tab1li,#tab2li{width:66px;height:28px;border:1pxsolid#09C;text-align:center;line-height:28px;float:left;cursor:pointer;margin-right:3px;}
#tab2li:hover{background:#CCC;}
#tab1li.on,#tab2li.on{background:#9C3;}
#wrapdiv,#wrapsdiv{width:498px;height:198px;border:1pxsolid#000;}
</style>
</head>
<body>
<divid="wrap">
<ulid="tab1">
<liclass="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<brclear="all"/>
<divclass="block">第一部分</div>
<divclass="none">第二部分</div>
<divclass="none">第三部分</div>
</div>
<divid="wraps">
<ulid="tab2">
<liclass="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<brclear="all"/>
<divclass="block">第一部分</div>
<divclass="none">第二部分</div>
<divclass="none">第三部分</div>
</div>
<scripttype="text/javascript">
tab("wrap","tab1","mouseover")
tab("wraps","tab2");
functiontab(wrap,navul,eve){
//tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover
vardivs=document.getElementById(wrap).getElementsByTagName("div");
varlis=document.getElementById(navul).getElementsByTagName("li");
for(vari=0;i<lis.length;i++){
lis[i].indx=i;
if(eve=="click"||eve==null){
lis[i].onclick=function(){
for(i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="none";
this.className="on";
divs[this.indx].className="block";
}
}
}elseif(eve=="mouseover"){
lis[i].onmouseover=function(){
for(i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="none";
this.className="on";
divs[this.indx].className="block";
}
}
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！