(007)选项卡 

 1 <html>
 2     <head>
 3         <meta http-equiv="content-Type" content="text/html;charset=utf-8">
 4         <style type="text/css">
 5             input {
 6                 background: white;
 7             }
 8             .active {
 9                 background: blue;
10             }
11             div {
12                 background: yellow;
13                 width: 150px;
14                 height: 150px;
15                 display: none;
16             }
17         </style>
18         <script type="text/javascript">
19             window.onload = function() {
20                 var btnNodes = document.getElementsByTagName("input");
21                 var divNodes = document.getElementsByTagName("div");
22                 for(var i = 0; i < btnNodes.length; i++)
23                 {
24                     //btnNodes[i].className = "active";
25                     btnNodes[i].index = i;
26                     btnNodes[i].onclick = function() {
27                         for(var i = 0; i < btnNodes.length; i++)
28                         {
29                             btnNodes[i].className = "";
30                             divNodes[i].style.display = "none";
31                         }
32                         this.className = "active";
33                         divNodes[this.index].style.display = "block";
34                     };
35                 }
36             }
37         </script>
38     </head>
39     <body>
40         <input type="button" value="1" class="active"/>
41         <input type="button" value="2"/>
42         <input type="button" value="3"/>
43         <div style="display:block">111</div>
44         <div>222</div>
45         <div>333</div>
46     </body>
47 </html>

 

posted @ 2013-11-25 22:16  雪中飞雁  阅读(64)  评论(0)    收藏  举报