javascript 选项卡 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 .aclick{background:red;}
 8 #div1 div{width:200px;height:200px;background:#ccc;display:none;}
 9 
10 #div2 .aclick{background:red;}
11 #div2 div{width:200px;height:200px;background:#ccc;display:none;}
12 </style>
13 
14 </head>
15 
16 <body>
17 <div id="div1">
18     <input class="aclick" type="button" value="1111">
19     <input type="button" value="2222">
20     <input type="button" value="3333">
21     <input type="button" value="4444">
22     <div style="display:block;">111111111111</div>
23     <div>222222222222</div>
24     <div>33333333333</div>
25     <div>44444444444</div>
26 </div>
27 
28 <div id="div2">
29     <input class="aclick" type="button" value="1111">
30     <input type="button" value="2222">
31     <input type="button" value="3333">
32     <input type="button" value="4444">
33     <div style="display:block;">111111111111</div>
34     <div>222222222222</div>
35     <div>33333333333</div>
36     <div>44444444444</div>
37 </div>
38 <script>
39 function tabCla(id){
40     var oDiv=document.getElementById(id);
41     var aBut=oDiv.getElementsByTagName('input');
42     var aDiv=oDiv.getElementsByTagName('div');
43     for(var i=0;i<aBut.length;i++){
44         aBut[i].index=i;
45         aBut[i].onclick=function(){
46             for(var i=0;i<aBut.length;i++){
47                 aBut[i].className='';
48                 aDiv[i].style.display='';
49             }
50             this.className='aclick';
51             aDiv[this.index].style.display='block';
52         }
53     }
54 }
55 tabCla("div1");
56 tabCla("div2");
57 </script>
58 </body>
59 </html>

 

posted @ 2017-08-18 13:30  wǒの湁茡潞釦﹌  阅读(155)  评论(0)    收藏  举报