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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！
热门推荐
1 训练狗狗憋尿
2 狗狗追踪训练
3 狗狗训练要多少钱
5 深圳狗狗训练
6 训练狗狗唤回
7 狗狗叫怎么训练
8 狗狗训练班
10 狗狗社会化训练
11 狗狗叫回训练
12 广州狗狗训练学校
13 狗狗训练躺下
14 狗狗随行训练
15 训练狗狗巡回
16 狗狗要怎么训练
17 狗狗喂食训练
18 训练狗狗躺下