Jquery选项卡制作

 1 <!doctype html>
 2  2  <html>
 3  3     <head>
 4  4        <meta charset="utf-8"/>
 5  5        <title>Jquery的select学习</title>
 6  6     </head>
 7  7     <style>
 8  8        .select-tag{
 9  9            width: 500px;
10 10            height: 30px;
11 11            background-color:#000;
12 12        }
13 13        .select-tag ul li{
14 14               float: left;
15 15               padding: 0 20px;
16 16               margin: 0 20px;
17 17               list-style:none;
18 18               color: #fff;
19 19               line-height: 30px;
20 20        }
21 21        .content{
22 22            width: 498px;
23 23            height: 400px;
24 24            border:1px solid #ccc;
25 25        }
26 26        .select-tag .show-li{
27 27            display: block;
28 28            background-color: #666;
29 29        }
30 30        .content div{display: none}
31 31        .content .show-con{
32 32            display: block;
33 33        }
34 34     </style>
35 35     <script src="jquery-1.10.2.min.js" type="text/javascript">
36 36     </script>
37 37     
38 38     <body>
39 39         <div class="select-tag">
40 40             <ul>
41 41                 <li class="show-li">国内新闻</li>
42 42                 <li>行业新闻</li>
43 43                 <li>公司新闻</li>
44 44             </ul>
45 45         </div>
46 46         <div class="content">
47 47             <div class="show-con">
48 48                 国内新闻
49 49             </div>
50 50             <div>
51 51                 行业新闻
52 52             </div>
53 53             <div>
54 54                 公司新闻
55 55             </div>
56 56             
57 57         </div>
58 58         <script>
59 59         $(document).ready(
60 60             function(){
61 61                 var $div_li=$(".select-tag ul li");             /*获取选项卡的li*/
62 62                 $div_li.click(function(){                       /*绑定单机时间*/
63 63                    $(this).addClass("show-li").siblings().removeClass("show-li");  /*点击的菜单添加class注意书写addClass且兄弟元素去除class*/
64 64                    var index=$div_li.index(this);               /*创建元素全部在div_li的索引*/
65 65                    $(".content>div").eq(index).show().siblings().hide();  /*显示li元素对应的div元素隐藏其他同辈元素*/
66 66                });
67 67 
68 68             }
69 69          
70 70        )
71 71     </script>
72 72     </body>
73 73     </html>
if you don't try,you will never know!