a-ling

导航

tab选项卡 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>tab</title>
 6         
 7         <style>
 8             #div1 .active{
 9                 background: yellow;
10             }
11             #div1 div{
12                 width: 200px;
13                 height: 200px;
14                 background: #ccc;
15                 border: 1px solid #999;
16                 display: none;
17             }
18         </style>
19     </head>
20     <body>
21         <div id="div1">
22             <input type="button" value="教育" class="active" />
23             <input type="button" value="培训" />
24             <input type="button" value="招生" />
25             <input type="button" value="出国" />
26             <div style="display: block;">1111</div>
27             <div>2222</div>
28             <div>3333</div>
29             <div>4444</div>
30         </div>
31         <script>
32             var div1 = document.getElementById('div1');
33             var divs = div1.getElementsByTagName('div');
34             var btns = div1.getElementsByTagName('input');
35             
36             for(var i = 0;i < btns.length;i ++){
37                 btns[i].index = i;
38                 btns[i].onclick = function(){
39                     for(var i = 0;i < btns.length;i ++){
40                         btns[i].className = '';
41                         divs[i].style.display = 'none';
42                     }
43                     this.className = 'active';
44                     divs[this.index].style.display = 'block';
45                 }
46             }
47         </script>
48     </body>
49 </html>

效果：

 

posted on 2017-04-12 16:27  a-ling  阅读(103)  评论(0)  编辑  收藏  举报