JQuery笔记(三)选项卡

通过jq封装的方法,可以更简单的制作一个选项卡

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         
14         #btn ul {
15             width: 300px;
16             height: 50px;
17             margin: 50px;
18         }
19         
20         .on {
21             color: red;
22         }
23         
24         #btn ul li {
25             list-style-type: none;
26             width: 50px;
27             height: 50px;
28             margin-left: 10px;
29             background: gray;
30             float: left;
31             line-height: 50px;
32             text-align: center;
33             cursor: pointer;
34         }
35     </style>
36 </head>
37 
38 <body>
39     <div id="btn">
40         <ul>
41             <li>1</li>
42             <li>2</li>
43             <li>3</li>
44         </ul>
45     </div>
46 
47     <div>
48         <div id="jq1"></div>
49         <div class="jq2"></div>
50         <div id="jq3"></div>
51     </div>
52 
53 
54 
55 
56     <script>
57 
58         //通过jq来设置三个要div
59         $(".jq2")[0].style.width = "100px";
60         $(".jq2")[0].style.height = "100px";
61         $(".jq2")[0].style.background = "blue";
62 
63         $("#jq1")[0].style.width = "100px";
64         $("#jq1")[0].style.height = "100px";
65         $("#jq1")[0].style.background = "red";
66 
67         $("#jq3")[0].style.width = "100px";
68         $("#jq3")[0].style.height = "100px";
69         $("#jq3")[0].style.background = "green";
70 
71         //定义一个变量aLi用于存放btn下面的li,方便使用
72         var aLi = $("#btn ul li");
73         //通过hide()方法来设置三个div隐藏
74         $("div div").hide();
75         //点击每一个li触发事件clik()方法，方法自带for循环
76         aLi.click(function() {
77             //把每个li通过index()方法所带序号存进一个变量中
78             var iNum = $(this).index();
79             //addClass()方法是增加类名，removeClass()方法是移出类名
80             $(this).addClass("on").siblings().removeClass("on");
81             //隐藏三个框，通过eq()方法选择显示当前li对应序号的框
82             $("div div").hide().eq(iNum).show();
83         })
84     </script>
85 </body>
86 
87 </html>

载入外链jq，就可以开始写代码了

 

posted @ 2016-12-02 09:26  rookieM  阅读(221)  评论(0)  编辑  收藏  举报