jQuery|简单tab栏切换
Posted hktx
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
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栏切换的主要内容,如果未能解决你的问题,请参考以下文章
207 jQuery 样式操作:css (),addClass,removeClass,toggleClass,tab 栏切换案例