1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>tab</title>
6 <script src="jquery.min.js"></script>
7 <style>
8 .active{
9 background: yellow;
10 }
11 #contents div{
12 width: 200px;
13 height: 200px;
14 background: #ccc;
15 border: 1px solid #999;
16 display: none;
17 }
18 </style>
19 </head>
20 <body>
21 <input type="button" value="教育" class="active" />
22 <input type="button" value="培训" />
23 <input type="button" value="招生" />
24 <input type="button" value="出国" />
25 <div id="contents">
26 <div style="display: block;">1111</div>
27 <div>2222</div>
28 <div>3333</div>
29 <div>4444</div>
30 </div>
31 <script>
32 $('input').click(function(){
33 $(this).addClass('active').siblings().removeClass('active');
34
35 $('#contents>div').eq($(this).index()).show().siblings().hide();
36 });
37 </script>
38 </body>
39 </html>
