js封装tab标签页实例分享

话不多说，请看代码

<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（也是默认事件），另外一种为鼠标移过事件mouseovervar 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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！