在项目中遇到的，要实现tab切换，我用的是swiper.js
官网：http://www.swiper.com.cn/api/start/new.html
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <title>首页</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no"> 8 <link type="text/css" rel="stylesheet" href="./css/swiper.css"> 9 <style> 10 html,body{ 11 width: 7.5rem; 12 padding: 0; 13 margin: 0; 14 height: 100%; 15 } 16 ul,p{ 17 margin: 0; 18 padding: 0; 19 } 20 a{ 21 text-decoration: none; 22 } 23 .index_container{ 24 position: relative; 25 width: 100%; 26 height: 100%; 27 top: 0; 28 left: 0; 29 } 30 .index_content{ 31 width: 100%; 32 min-height: 100%; 33 } 34 .index_con{ 35 position: relative; 36 padding-bottom: 0.8rem; 37 } 38 .advertisement{ 39 height: 4.21rem; 40 border-bottom: 1px solid #d4cdc4; 41 } 42 #crec_index_jd,#crec_jd,#crec_jd li{ 43 width: auto !important; 44 height: 4.21rem !important; 45 } 46 .crecweb_advertisement img{ 47 width: auto; 48 height: 4.21rem; 49 } 50 .search{ 51 position: absolute; 52 top: 0.2rem; 53 width: 6.9rem; 54 height: 0.56rem; 55 margin: 0 0.3rem; 56 z-index: 100; 57 } 58 .search_input{ 59 width: 5.94rem; 60 padding: 0 0.76rem 0 0.2rem; 61 height: 0.56rem; 62 border-radius: 8px; 63 border: none; 64 float: left; 65 font-size: 0.26rem; 66 color: #878787; 67 z-index: 5; 68 } 69 input::-webkit-input-placeholder{ 70 /* WebKit browsers */ 71 color: #878787; 72 } 73 input:-moz-placeholder{ 74 /* Mozilla Firefox 4 to 18 */ 75 color: #878787; 76 } 77 input::-moz-placeholder{ 78 /* Mozilla Firefox 19+ */ 79 color: #878787; 80 } 81 input:-ms-input-placeholder{ 82 /* Internet Explorer 10+ */ 83 color: #878787; 84 } 85 .crecweb_search_i{ 86 display: block; 87 width: 0.28rem; 88 height: 0.28rem; 89 background: url("http://static.crecgec.com/crecgecweb/search.png") 50% 50% no-repeat; 90 background-size: 0.28rem 0.28rem; 91 position: absolute; 92 z-index: 10; 93 left: 6.14rem; 94 padding: 0.14rem; 95 } 96 97 .crecweb_notice{ 98 height: 0.26rem; 99 line-height: 0.26rem; 100 margin: 0.2rem 0.3rem; 101 overflow: hidden; 102 } 103 .crecweb_notice_img{ 104 width: 0.31rem; 105 height: 0.26rem; 106 background: url('http://static.crecgec.com/crecgecweb/notice.png') no-repeat; 107 background-size: 0.31rem 0.26rem; 108 float: left; 109 } 110 .crecweb_notice li { 111 font-size: 0.22rem; 112 position: relative; 113 list-style: none; 114 } 115 .crecweb_notice li a{ 116 height: 0.26rem; 117 color: #2d2d2d; 118 } 119 .crecweb_notice li a span{ 120 width: 3.9rem; 121 overflow: hidden; 122 white-space: nowrap; 123 text-overflow: ellipsis; 124 margin-left: 0.2rem; 125 } 126 .crecweb_notice li a em{ 127 /*position: absolute;*/ 128 /*right: 0;*/ 129 font-style: normal; 130 } 131 132 133 134 135 .crecweb_tendering,.crecweb_winTheBid,.crecweb_qualifiedSupply{ 136 margin: 0.3rem; 137 } 138 .tendering-table,.title{ 139 height: 0.43rem; 140 line-height: 0.43rem; 141 border-bottom: 1px solid #d01e00; 142 } 143 .tendering-table ul{ 144 height: 0.43rem; 145 float: left; 146 } 147 .tendering-table ul li{ 148 height: 0.43rem; 149 list-style: none; 150 float: left; 151 font-size: 0.26rem; 152 padding:0 0.1rem; 153 margin-right: 0.1rem; 154 color: #000000; 155 background-color: #fff; 156 border-top-left-radius: 4px; 157 border-top-right-radius: 4px; 158 } 159 .title_show{ 160 height: 0.43rem; 161 list-style: none; 162 float: left; 163 font-size: 0.26rem; 164 padding:0 0.1rem; 165 color: #fff !important; 166 background-color: #d01e00 !important; 167 border-top-left-radius: 4px; 168 border-top-right-radius: 4px; 169 } 170 .crecweb_more{ 171 font-size: 0.2rem; 172 color: #000000; 173 float: right; 174 } 175 .crecweb_active{ 176 color: #fff !important; 177 background-color: #d01e00 !important; 178 } 179 180 .swiper-slide ul li,.crecweb_content ul li,.crecweb_content_gys ul li{ 181 overflow: hidden; 182 list-style: none; 183 color: #2d2d2d; 184 margin-top: 0.3rem; 185 position: relative; 186 list-style-image: none; 187 background-image: url( "http://static.crecgec.com/crecgecweb/yuandian.png" ); 188 background-repeat: no-repeat; 189 background-position: 2px 0.1rem; 190 padding-left: 15px; 191 } 192 .swiper-slide ul li a,.crecweb_content ul li a,.crecweb_content_gys ul li a{ 193 color: #2d2d2d; 194 font-size: 0.22rem; 195 float: left; 196 } 197 .swiper-slide ul li:first-child,.crecweb_content ul li:first-child,.crecweb_content_gys ul li:first-child{ 198 margin-top: 0.2rem; 199 } 200 .swiper-slide ul li span,.crecweb_content ul li span{ 201 display: block; 202 height: auto; 203 /*max-height: 0.6rem;*/ 204 font-size: 0.22rem; 205 overflow: hidden; 206 } 207 .crecweb_content_gys ul li span{ 208 width: 4.8rem; 209 overflow: hidden; 210 white-space: nowrap; 211 text-overflow: ellipsis; 212 float: left; 213 } 214 .crecweb_content_gys ul li em{ 215 position: absolute; 216 right: 0; 217 font-style: normal; 218 } 219 .swiper-slide ul li em,.crecweb_content ul li em{ 220 font-size: 0.18rem; 221 position: absolute; 222 right: 0; 223 bottom: 0; 224 font-style: normal; 225 } 226 227 228 229 .crecweb_footer{ 230 display: flex; 231 width: 100%; 232 background-color: #e5e5e5; 233 position: relative; 234 clear: both; 235 margin-top: -0.8rem; 236 } 237 .footer_con_line{ 238 flex: 1; 239 position: relative; 240 border-bottom: 1px solid #c6c6c6; 241 top: -0.38rem; 242 } 243 .footer_con_text{ 244 padding: 0 0.17rem; 245 font-size: 0.2rem; 246 height: 0.2rem; 247 line-height: 0.2rem; 248 color: #a9a7a7; 249 margin: 0.3rem 0; 250 } 251 252 .crecweb_publicDiv{ 253 width: 100%; 254 height: 0.2rem; 255 background-color: #e5e5e5; 256 } 257 258 .crecgecweb_loading{ 259 position:fixed; 260 width: 100%; 261 height: 100%; 262 z-index:999; 263 background-color: rgba(229,229,229,1); 264 } 265 .crecgecweb_loading img{ 266 position: absolute; left: 50%; top: 50%; 267 transform: translate(-50%, -50%); 268 } 269 </style> 270 </head> 271 <body> 272 <script> 273 setSize() 274 275 window.addEventListener('resize', () => { 276 setSize() 277 }, false) 278 279 280 function setSize() { 281 // 设置字体 282 var deviceWidth = document.documentElement.clientWidth; 283 if (deviceWidth < 320) { 284 deviceWidth = 320 285 } 286 if(deviceWidth > 750) { 287 deviceWidth = 750 288 } 289 document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'; 290 } 291 </script> 292 293 <div class="index_container"> 294 <div class="index_content"> 295 <!--招标公告、竞争性谈判、竞价采购、询价书 start--> 296 <div class="crecweb_tendering" > 297 <div class="tendering-table"> 298 <ul> 299 <li class="crecweb_active">招标公告</li> 300 <li>竞争性谈判</li> 301 <li>竞价采购</li> 302 <li>询价书</li> 303 </ul> 304 <!--<a class="crecweb_more">更多></a>--> 305 </div> 306 <div class="swiper-container"> 307 <div class="swiper-wrapper"> 308 <div class="swiper-slide crecweb_content_sub"> 309 <ul> 310 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=8"></script> 311 </ul> 312 </div> 313 <div class="swiper-slide crecweb_content_sub"> 314 <ul> 315 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=9"></script> 316 </ul> 317 </div> 318 <div class="swiper-slide crecweb_content_sub"> 319 <ul> 320 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=56"></script> 321 </ul> 322 </div> 323 <div class="swiper-slide crecweb_content_sub"> 324 <ul> 325 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=55"></script> 326 </ul> 327 </div> 328 </div> 329 </div> 330 </div> 331 <!--招标公告、竞争性谈判、竞价采购、询价书 end--> 332 </div> 333 </div> 334 <script type="text/javascript" src="./js/jquery-3.1.1.js"></script> 335 <script type="text/javascript" src="./js/swiper.js"></script> 336 <script> 337 window.onload = function () { 338 // table切换 339 var mySwiper = new Swiper('.swiper-container') 340 $('.tendering-table ul li').on('click', function (e) { 341 e.preventDefault(); 342 //得到当前索引 343 var i = $(this).index(); 344 $('.tendering-table ul li').removeClass('crecweb_active').eq(i).addClass('crecweb_active'); 345 mySwiper.slideTo(i, 1000, false); 346 });
//这块是调用 slideChange方法，当内容左右移动的时候，tab页也相应切换
347 mySwiper.on('slideChange', function () { 348 $('.tendering-table ul li').removeClass('crecweb_active').eq(this.activeIndex).addClass('crecweb_active'); 349 }) 350 351 352 var maxWidth = 36 353 $(".crecweb_content_sub ul li").each(function () { 354 355 if($(this).find('span').text().trim().length > maxWidth) { 356 $(this).find('span').text($(this).find('span').text().trim().substring(0, maxWidth)) 357 $(this).find('span').text( $(this).find('span').text() + '...') 358 } 359 if($(this).find('span').text().trim().length > 21) { 360 $(this).find('span').css({'height':'0.72rem'}) 361 } 362 }) 363 364 } 365 366 </script> 367 </body> 368 </html>
slideChange