1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{margin: 0;padding: 0;}
8 #tab{width: 410px;margin: 0 auto;}
9 #tit{overflow: hidden;}
10 #tit span{float: left;width: 100px;height: 30px;border: 1px solid red;text-align: center;line-height: 30px;font-size: 30px;}
11 #con{width: 406px;border: 1px solid red;list-style: none;height: 300px;}
12 #con li{width: 406px;height: 300px;text-align: center;line-height: 300px;font-size: 50px;color: red;display: none;}
13 #con .show{display: block;}
14 #tit .select{background: #ccc;}
15 </style>
16 </head>
17 <body>
18 <div id="tab">
19 <div id="tit">
20 <span class='select' >111</span>
21 <span >222</span>
22 <span >333</span>
23 <span >444</span>
24 </div>
25 <ul id="con">
26 <li class="show" >内容1111</li>
27 <li>内容2222</li>
28 <li>内容3333</li>
29 <li>内容4444</li>
30 </ul>
31 </div>
32 <script>
33 var tit=document.getElementById('tit');
34 var spans=tit.getElementsByTagName('span');
35 var con=document.getElementById('con');
36 var lis=con.getElementsByTagName('li');
37
38 for (var i = 0; i < spans.length; i++) {
39 //第一个for循环给所有的span绑定点击事件
40 spans[i].onclick=function() {
41 for (var j = 0; j< spans.length; j++) {
42 if (spans[j]==this) {
43 spans[j].className='select';
44 lis[j].className='show';
45 }else{
46 spans[j].className='';
47 lis[j].className='';
48 }
49 };
50 };
51 }
52 </script>
53 </body>
54 </html>
