标签切换 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 6 <script type="text/javascript">
 7 
 8 $(document).ready(function () {
 9     $("#tabs div").bind("click", function () {
10         var index = $(this).index();
11         var divs = $("#tabs-body > div");
12         $(this).parent().children("div").attr("class", "select1");//将所有选项置为未选中
13         $(this).attr("class", "select2"); //设置当前选中项为选中样式
14         divs.hide();//隐藏所有选中项内容
15         divs.eq(index).show(); //显示选中项对应内容
16     });
17 
18 });
19 </script>
20 
21 <style type="text/css">
22 
23 </style>
24 </head>
25 <body>
26     <div id="tabs">
27         <div class="select1" style="float:left;">管理导航</div>
28         <div class="select2">系统设置</div>     
29     </div>
30    
31 <div id="tabs-body" class="tabs-body">
32     <div style="display:block">
33     111111111
34     </div>
35     <div style="display:none">
36     222222222
37     </div>
38 </div>
39 </body>
40 </html>

 

posted on 2017-04-07 23:54  九宝的小跟班  阅读(176)  评论(1)    收藏  举报

导航