通过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，就可以开始写代码了