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>
