jQuery|简单tab栏切换
程序员文章站
2022-03-08 22:42:28
1 2 3 4 5 6 7
html
css
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>
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 }
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>
上一篇： 车联网应用已被列为国家重大专项项目
下一篇： 适合0基础的web开发系列教程-教程概述