欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery|简单tab栏切换

程序员文章站 2022-03-08 22:42:28
1 2 3 4 5 6 7
jQuery|简单tab栏切换
  1 <!doctype html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="x-ua-compatible" content="ie=edge">
  8     <title>document</title>
  9     <link rel="stylesheet" href="./1.css">
 10     <script src="./jquery-1.12.4.js"></script>
 11 </head>
 12 
 13 <body>
 14     <div class="box">
 15         <div class="top-box">
 16             <ul>
 17                 <li class="current">首页</li>
 18                 <li>多玩</li>
 19                 <li>17173</li>
 20                 <li>136</li>
 21                 <li>哈哈</li>
 22                 <li class="more"><a href="#">+更多+</a></li>
 23             </ul>
 24             <div class="move"></div>
 25         </div>
 26         <div class="content">
 27             <div class="content-box">
 28                 <ul>
 29                     <li>
 30                         <a href="#">[全部]</a>
 31                         <a href="#" title="2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 32                         <span>18/01</span>
 33                     </li>
 34                     <li>
 35                         <a href="#">[全部]</a>
 36                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 37                         <span>18/01</span>
 38                     </li>
 39                     <li>
 40                         <a href="#">[全部]</a>
 41                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 42                         <span>18/01</span>
 43                     </li>
 44                     <li>
 45                         <a href="#">[全部]</a>
 46                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 47                         <span>18/01</span>
 48                     </li>
 49                     <li>
 50                         <a href="#">[全部]</a>
 51                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 52                         <span>18/01</span>
 53                     </li>
 54                     <li>
 55                         <a href="#">[全部]</a>
 56                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 57                         <span>18/01</span>
 58                     </li>
 59                     <li>
 60                         <a href="#">[全部]</a>
 61                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 62                         <span>18/01</span>
 63                     </li>
 64                     <li>
 65                         <a href="#">[全部]</a>
 66                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 67                         <span>18/01</span>
 68                     </li>
 69                     <li>
 70                         <a href="#">[全部]</a>
 71                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 72                         <span>18/01</span>
 73                     </li>
 74                 </ul>
 75                 <ul>
 76                     <li>
 77                         <a href="#">[全部]</a>
 78                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 79                         <span>18/01</span>
 80                     </li>
 81                     <li>
 82                         <a href="#">[全部]</a>
 83                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 84                         <span>18/01</span>
 85                     </li>
 86                     <li>
 87                         <a href="#">[全部]</a>
 88                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 89                         <span>18/01</span>
 90                     </li>
 91                     <li>
 92                         <a href="#">[全部]</a>
 93                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 94                         <span>18/01</span>
 95                     </li>
 96                     <li>
 97                         <a href="#">[全部]</a>
 98                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
 99                         <span>18/01</span>
100                     </li>
101                     <li>
102                         <a href="#">[全部]</a>
103                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
104                         <span>18/01</span>
105                     </li>
106                     <li>
107                         <a href="#">[全部]</a>
108                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
109                         <span>18/01</span>
110                     </li>
111                     <li>
112                         <a href="#">[全部]</a>
113                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
114                         <span>18/01</span>
115                     </li>
116                     <li>
117                         <a href="#">[全部]</a>
118                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
119                         <span>18/01</span>
120                     </li>
121                 </ul>
122                 <ul>
123                     <li>
124                         <a href="#">[全部]</a>
125                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
126                         <span>18/01</span>
127                     </li>
128                     <li>
129                         <a href="#">[全部]</a>
130                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
131                         <span>18/01</span>
132                     </li>
133                     <li>
134                         <a href="#">[全部]</a>
135                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
136                         <span>18/01</span>
137                     </li>
138                     <li>
139                         <a href="#">[全部]</a>
140                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
141                         <span>18/01</span>
142                     </li>
143                     <li>
144                         <a href="#">[全部]</a>
145                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
146                         <span>18/01</span>
147                     </li>
148                     <li>
149                         <a href="#">[全部]</a>
150                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
151                         <span>18/01</span>
152                     </li>
153                     <li>
154                         <a href="#">[全部]</a>
155                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
156                         <span>18/01</span>
157                     </li>
158                     <li>
159                         <a href="#">[全部]</a>
160                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
161                         <span>18/01</span>
162                     </li>
163                     <li>
164                         <a href="#">[全部]</a>
165                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
166                         <span>18/01</span>
167                     </li>
168                 </ul>
169                 <ul>
170                     <li>
171                         <a href="#">[全部]</a>
172                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
173                         <span>18/01</span>
174                     </li>
175                     <li>
176                         <a href="#">[全部]</a>
177                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
178                         <span>18/01</span>
179                     </li>
180                     <li>
181                         <a href="#">[全部]</a>
182                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
183                         <span>18/01</span>
184                     </li>
185                     <li>
186                         <a href="#">[全部]</a>
187                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
188                         <span>18/01</span>
189                     </li>
190                     <li>
191                         <a href="#">[全部]</a>
192                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
193                         <span>18/01</span>
194                     </li>
195                     <li>
196                         <a href="#">[全部]</a>
197                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
198                         <span>18/01</span>
199                     </li>
200                     <li>
201                         <a href="#">[全部]</a>
202                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
203                         <span>18/01</span>
204                     </li>
205                     <li>
206                         <a href="#">[全部]</a>
207                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
208                         <span>18/01</span>
209                     </li>
210                     <li>
211                         <a href="#">[全部]</a>
212                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
213                         <span>18/01</span>
214                     </li>
215                 </ul>
216                 <ul>
217                     <li>
218                         <a href="#">[全部]</a>
219                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
220                         <span>18/01</span>
221                     </li>
222                     <li>
223                         <a href="#">[全部]</a>
224                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
225                         <span>18/01</span>
226                     </li>
227                     <li>
228                         <a href="#">[全部]</a>
229                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
230                         <span>18/01</span>
231                     </li>
232                     <li>
233                         <a href="#">[全部]</a>
234                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
235                         <span>18/01</span>
236                     </li>
237                     <li>
238                         <a href="#">[全部]</a>
239                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
240                         <span>18/01</span>
241                     </li>
242                     <li>
243                         <a href="#">[全部]</a>
244                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
245                         <span>18/01</span>
246                     </li>
247                     <li>
248                         <a href="#">[全部]</a>
249                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
250                         <span>18/01</span>
251                     </li>
252                     <li>
253                         <a href="#">[全部]</a>
254                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
255                         <span>18/01</span>
256                     </li>
257                     <li>
258                         <a href="#">[全部]</a>
259                         <a href="#">2018 cj cosplay封面大赛正式开幕 天刀特别奖等你赢...</a>
260                         <span>18/01</span>
261                     </li>
262                 </ul>
263             </div>
264         </div>
265     </div>
266 </body>
267 </html>
html
jQuery|简单tab栏切换
 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 li {
 6     list-style: none;
 7 }
 8 a{
 9     text-decoration: none;
10 }
11 
12 body{
13     background-color: #ccc;
14 }
15 
16 .box{
17     width: 380px;
18     height: 280px;
19     background-color: aliceblue;
20     margin: 50px auto;
21     padding: 10px 10px;
22 }
23 
24 .top-box {
25     position: relative;
26     height: 30px;
27     border-bottom: 1px solid #ccc;
28 }
29 
30 .top-box .current {
31     color:#ff8f17;
32 }
33 
34 .top-box ul{
35     overflow: hidden;
36 }
37 
38 .top-box ul li {
39     float: left;
40     margin-left:10px;
41     cursor: pointer;
42 }
43 
44 .top-box ul .more {
45     margin-left:100px;
46 }
47 
48 .top-box ul li a {
49     color:#ccc;
50 }
51 
52 .move {
53     position: absolute;
54     left: 0px;
55     top: 29px;
56     width: 43px;
57     border-bottom: 1px solid #ff8f17;
58 }
59 
60 .content {
61     position: relative;
62     height: 250px;
63     overflow: hidden;
64 }
65 
66 .content-box {
67     position: absolute;
68     left: 0px;
69     top: 0px;
70     width: 2000px;
71 }
72 .content-box ul {
73     float: left;
74 }
75 
76 .content-box ul li {
77     font-size: 12px;
78     line-height: 29px;
79 }
80 
81 .content-box ul li a:nth-child(1){
82     color:#ccc;
83 }
84 
85 .content-box ul li a:nth-child(2){
86     color:black;
87     margin-right: 10px;
88 }
89 
90 .content-box ul li span {
91     margin-right: 10px;;
92 }
93 
94 .content-box ul li a:nth-child(2):hover{
95     color:red;
96 }
css
1 <script>
2         $(".top-box ul li").click(function () {
3             $(this).addclass("current").siblings().removeclass("current");
4             $(".top-box ul li").last().off();
5             var index = $(this).index();
6             $(".move").animate({ 'left': 8 + index * 42 + 'px' }, 300)
7             $(".content-box").animate({'left':0 + index * -390 + 'px'},300)
8         })
9  </script>