a-ling

导航

tab选项卡--jq 

 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>

 

posted on 2017-04-12 16:50  a-ling  阅读(187)  评论(0)    收藏  举报