首页 > 代码库 > js封装tab标签页

js封装tab标签页

2024-08-27 14:54:35   217人阅读

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

 

js封装tab标签页


联系
我们