首页 > 代码库 > jquery之选项卡

jquery之选项卡

2024-10-28 23:58:02   206人阅读

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7   *{
 8 margin:0;
 9 padding:0;
10 }
11 .tab{
12     width:240px;
13     margin:50px;
14     /*border:1px solid;*/
15 }
16 .tab_menu{
17     clear:both;
18 }
19 .tab_menu li{
20     float:left; 
21     text-align:center; 
22     list-style:none; 
23     background:#F1F1F1;
24     border:1px solid #898989; 
25     margin-right:4px; 
26     cursor:pointer;  
27     padding:1px 6px;
28     border-bottom:none; 
29 
30 }
31 .tab_menu li.hover{
32     background:#DFDFDF;
33 }
34 .tab_menu li.selected{
35     color:#FFF; 
36     background:#6D84B4;
37 }
38 .tab_box{
39     clear:both; 
40     height:100px; 
41     border:1px solid #898989; 
42 }
43 .hide{
44     display:none;
45 }
46 </style>
47 <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script>
48 
49   <script type="text/javascript" >
50 
51     $(function(){
52         var lis =$("div.tab_menu ul li");
53         lis.click(function(){
54             $(this).addClass("selected")            //当前<li>元素高亮
55                    .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
56             var index =  $(this).index();  // 重点获取当前点击的<li>元素 在 全部li元素中的索引。
57             $("div.tab_box > div")       //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
58                     .eq(index).show()   //显示 <li>元素对应的<div>元素
59                     .siblings().hide(); //隐藏其它几个同辈的<div>元素
60         })
61     })
62 
63 </script>
64 
65 </head>
66 
67 <body>
68 <div class="tab">
69     <div class="tab_menu">
70         <ul>
71             <li class="selected">时事</li>
72             <li>体育</li>
73             <li>娱乐</li>
74         </ul>
75     </div>
76     <div class="tab_box"> 
77          <div>时事</div>
78          <div class="hide">体育</div>
79          <div class="hide">娱乐</div>
80     </div>
81 </div>
82 </body>
83 </html>

效果图：

技术分享

 

jquery之选项卡


联系
我们