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>
