tab切换传参版本 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>tab</title>
 6     <style>
 7     *{
 8         margin: 0;
 9         padding: 0;
10     }
11     #title{
12         width: 306px;
13         overflow: hidden;
14         margin: 50px auto 0px;
15     }
16     #title h2{
17         width: 100px;
18         height: 30px;
19         border: 1px solid #000;
20         font-size: 30px;
21         text-align: center;
22         line-height: 30px;
23         float: left;
24     }
25     #con{
26         width: 304px;
27         border: 1px solid #000;
28         height: 200px;
29         margin: 0 auto;
30     }
31     #con li{
32         width: 304px;
33         height: 200px;
34         font-size: 40px;
35         color: #ccc;
36         line-height: 200px;
37         text-align: center;
38         list-style: none;
39         display: none;
40     }
41     .select{
42         background: #ccc;
43     }
44     #con .show{
45         display: block;
46     }
47     </style>
48 </head>
49 <body>
50     <div id="title">
51         <h2 class="select" onclick="tab(0)">标题一</h2>
52         <h2 onclick="tab(1)">标题二</h2>
53         <h2 onclick="tab(2)">标题三</h2>
54     </div>
55     <ul id="con">
56         <li class="show">内容一</li>
57         <li>内容二</li>
58         <li>内容三</li>
59     </ul>
60 </body>
61 <script>
62     var title=document.getElementById('title');
63     var hs=title.getElementsByTagName('h2');
64     // alert(hs.length);
65     var con=document.getElementById('con');
66     var lis=con.getElementsByTagName('li');
67 /*    function tab(a) {
68         for (var i = 0; i < hs.length; i++) {
69             hs[i].className='';
70             lis[i].className='';
71         };
72         hs[a].className='select';
73         lis[a].className='show';
74     };*/
75 
76     function tab(a) {
77         for (var i = 0; i <hs.length; i++) {
78             hs[i].className='';
79             lis[i].className='';
80         };
81         hs[a].className='select';
82         lis[a].className='show';
83     };
84 
85 /*    hs[0].onclick=function() {
86         for (var i = 0; i < hs.length; i++) {
87             hs[i].className='';
88             lis[i].className='';
89         };
90         ha[0].
91     };*/
92 </script>
93 </html>

 

posted @ 2016-08-28 17:43  舍近求猿  阅读(244)  评论(0)    收藏  举报