js封装tab标签页

2016-12-19 08:09:27来源:cnblogs.com作者:wxwx123人点击

第七城市
 1 <html> 2 <head> 3     <title></title> 4     <meta charset="UTF-8"> 5     <style> 6         *{ padding:0; margin:0;} 7         .block{ display:block;} 8         .none{ display:none;} 9         #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}10         #tab1,#tab2{ list-style:none;}11         #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;}12         #tab2 li:hover{ background:#CCC;}13         #tab1 li.on,#tab2 li.on{ background:#9C3;}14         #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}15 16     </style>17 </head>18 <body>19 20 <div id="wrap">21     <ul id="tab1">22         <li class="on">第一项</li>23         <li>第二项</li>24         <li>第三项</li>25     </ul>26     <br clear="all" />27     <div class="block">第一部分</div>28     <div class="none">第二部分</div>29     <div class="none">第三部分</div>30 </div>31 <div id="wraps">32     <ul id="tab2">33         <li class="on">第一项</li>34         <li>第二项</li>35         <li>第三项</li>36     </ul>37     <br clear="all" />38     <div class="block">第一部分</div>39     <div class="none">第二部分</div>40     <div class="none">第三部分</div>41 </div>42 43 <script type="text/javascript">44     tab("wrap","tab1","mouseover")45     tab("wraps","tab2");46     function tab(wrap,navul,eve){47 //tab效果封装,目前只有两种变换方式,一种为点击事件click(也是默认事件),另外一种为鼠标移过事件mouseover48         var divs=document.getElementById(wrap).getElementsByTagName("div");49         var lis=document.getElementById(navul).getElementsByTagName("li");50         for(var i=0;i<lis.length;i++){51             lis[i].indx=i;52             if(eve=="click" || eve==null){53                 lis[i].onclick=function(){54                     for(i=0;i<lis.length;i++){55 56                         lis[i].className="";57                         divs[i].className="none";58 59                         this.className="on";60                         divs[this.indx].className="block";61                     }62                 }63             }else if(eve=="mouseover"){64                 lis[i].onmouseover=function(){65                     for(i=0;i<lis.length;i++){66                         lis[i].className="";67                         divs[i].className="none";68 69                         this.className="on";70                         divs[this.indx].className="block";71                     }72                 }73             }74         }75     }76 </script>77 </body>78 </html>

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台