选项卡（tab栏切换）
1 <style type="text/css">
2 *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;}
3 #container{
4 width: 398px;
5 margin: 100px auto;}
6 #container a{
7 display:block ;
8 width: 98px;
9 height: 42px;
10 line-height: 42px;
11 text-align: center;
12 float: left;
13 border-top: solid 1px #ff4400;
14 border-bottom: solid 1px #ff4400;
15 border-left: solid 1px #ff4400;
16 color: #333333;
17 text-decoration: none;
18 }
19 #container a:hover{
20 color: #ff4400;
21 }
22 .content{
23 width: 355px;
24 height: 140px;
25 text-align: center;
26 border-right: solid 1px #ff4400;
27 border-bottom: solid 1px #ff4400;
28 border-left: solid 1px #ff4400;
29 padding: 30px 0 0 40px;
30 display: none;
31 }
32 .clear{clear: left;}
33 #container a.on{ background: #ff4400; color: #fff;}
34 </style>
35
36 </head>
37 <body>
38 <div id="container">
39 <a href="#" class="on">充话费</a>
40 <a href="#">充流量</a>
41 <a href="#">充固话</a>
42 <a href="#" style="border-right: solid 1px #ff4400;">充宽带</a>
43
44 <div class="clear"></div>
45
46 <div class="content" style="display:block;">
47 <img src="images/1.png" />
48 </div>
49 <div class="content">
50 <img src="images/2.png" />
51 </div>
52 <div class="content">
53 <img src="images/3.png" />
54 </div>
55 <div class="content">
56 <img src="images/4.png" />
57 </div>
58 </div>
59 </body>
60 </html>
61 <script type="text/javascript">
62 //排他思想：让所有的类名和样式都去掉， 让自己加类名，让自己对用的div显示
63 var container = document.getelementbyid("container");
64 var alla = container.getelementsbytagname("a");
65 var con = container.getelementsbyclassname("content");
66 for(var i = 0; i < alla.length; i++){//给所有的a标签绑定点击事件
67 alla[i].index = i;//在每一个a身上加个自定义属性index，index存的是自己对应的下标
68 alla[i].onclick = function(){
69 for(var j = 0; j < alla.length; j++){
70 alla[j].classname = "";
71 con[j].style.display = "none";
72 }
73 this.classname = "on";
74 con[this.index].style.display = "block";
75 }
76 }
77 </script>
![[js高手之路]jquery插件开发实战-选项卡详解](https://www.kunjuke.com/file/css/thumb/7.jpg/280-180.jpg)
