您的位置：首页 > Web前端 > JQuery

Jquery选项卡制作

2013-12-16 19:56 295 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航