jQuery-tab切换
程序员文章站
2022-04-10 21:17:21
效果图 ......
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="x-ua-compatible" content="ie=edge">
7 <title>tab</title>
8 <style>
9 * {
10 margin: 0;
11 padding: 0
12 }
13
14 ul {
15 list-style: none;
16 }
17
18 #contain {
19 margin: 10px auto;
20 width: 300px;
21 height: 500px;
22 border: solid rgb(224, 222, 222);
23 border-radius: 10px;
24 overflow: scroll;
25 }
26
27 #contain h4 {
28 margin-top: 5px;
29 text-align: center;
30 height: 30px;
31 line-height: 30px;
32 border-bottom: solid rgb(240, 240, 240);
33 }
34
35 /* tab */
36 #coupon>li {
37 float: left;
38 margin-top: 10px;
39 display: inline-block;
40 width: 100px;
41 border: solid rgb(240, 240, 240);
42 height: 30px;
43 line-height: 30px;
44 font-size: 12px;
45 color: rgb(177, 175, 175);
46 box-sizing:border-box;
47 text-align: center;
48 }
49
50 #coupon>li:first-child {
51 border-left: 0;
52 border-right: 0;
53 }
54
55 #coupon>li:last-child {
56 border-left: 0;
57 border-right: 0;
58 }
59
60 #coupon .active {
61 border: solid red;
62 background: red;
63 color: #fff;
64 }
65
66 /* 优惠券内容 */
67 #coupon-contain {
68 margin: 50px 5px;
69 }
70
71 #coupon-contain>div>div {
72 margin: 10px 5px;
73 text-align: center;
74 height: 50px;
75 line-height: 50px;
76 border-radius: 8px;
77 background: rebeccapurple;
78 }
79
80 /* 隐藏所有优惠券 */
81 #coupon-contain>div {
82 display: none;
83 }
84
85 /* 显示class为show的元素 */
86 #coupon-contain>.show {
87 display: block;
88 }
89
90 #coupon-contain>div:first-child>div {
91 background: green;
92 }
93
94 #coupon-contain>div:last-child>div {
95 background: #333;
96 }
97 </style>
98
99 <script src="jquery-3.4.1.js"></script>
100 <script>
101 $(function() {
102 var $coupon_tab = $("#coupon>li");
103 var $coupon_contain = $('#coupon-contain>div');
104 var index = 0;
105
106 $coupon_tab.click(function(){
107 //移除tab中class的active属性
108 $($coupon_tab[index]).removeclass('active');
109 //移除优惠券中class的active属性
110 $($coupon_contain[index]).removeclass('show');
111
112 index = $(this).index();
113 //添加tab中class的active属性
114 $(this).addclass('active');
115 //添加优惠券中class的active属性
116 $($coupon_contain[index]).addclass('show');
117
118 });
119 });
120 </script>
121 </head>
122 <body>
123 <div id="contain">
124 <h4>优惠券</h4>
125 <ul id="coupon">
126 <li class="active">未使用</li>
127 <li>已使用</li>
128 <li>已过期</li>
129 </ul>
130 <div id="coupon-contain">
131 <div id=“coupon-unused” class="show">
132 <div>未使用的优惠券</div>
133 <div>未使用的优惠券</div>
134 <div>未使用的优惠券</div>
135 </div>
136 <div id=“coupon-used” class="hide">
137 <div>已使用的优惠券</div>
138 <div>已使用的优惠券</div>
139 <div>已使用的优惠券</div>
140 <div>已使用的优惠券</div>
141 </div>
142 <div id=“coupon-expired” class="hide">
143 <div>已过期的优惠券</div>
144 <div>已过期的优惠券</div>
145 <div>已过期的优惠券</div>
146 </div>
147 </div>
148 </div>
149 </body>
150 </html>
效果图