js封装tab标签页实例分享
程序员文章站
2023-08-19 11:05:47
话不多说，请看代码
话不多说，请看代码
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{ padding:0; margin:0;}
.block{ display:block;}
.none{ display:none;}
#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
#tab1,#tab2{ list-style:none;}
#tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09c; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
#tab2 li:hover{ background:#ccc;}
#tab1 li.on,#tab2 li.on{ background:#9c3;}
#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
</style>
</head>
<body>
<div id="wrap">
<ul id="tab1">
<li class="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<div id="wraps">
<ul id="tab2">
<li class="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<script type="text/javascript">
tab("wrap","tab1","mouseover")
tab("wraps","tab2");
function tab(wrap,navul,eve){
//tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover
var divs=document.getelementbyid(wrap).getelementsbytagname("div");
var lis=document.getelementbyid(navul).getelementsbytagname("li");
for(var i=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";
}
}
}else if(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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！