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
 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>

 

posted @ 2018-10-14 18:37  虎口月兑险  阅读(352)  评论(0)  编辑  收藏  举报