話不多說,請看代碼
<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>
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!