?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>jQuery|简单tab栏切换
原文地址：https://www.cnblogs.com/hktx/p/9780892.html