<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"> <title>测试页面</title> <meta name="applicable-device" content="mobile"> <link rel="stylesheet" href="/css/swiper-3.4.2.min.css"></head><body> <div class="tabBox"> <div class="tabItem active">全部(102)</div> <div class="tabItem">待付款(1)</div> <div class="tabItem">待发货(1)</div> <div class="tabItem">待收货(1)</div> <div class="tabItem">已完成(1)</div> </div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> <div class="swiper-slide">slider4</div> <div class="swiper-slide">slider5</div> </div> </div><script src="/js/jquery.js"></script><script src="/js/swiper-3.4.2.min.js"></script> <script> var tabItem = $('.tabBox .tabItem'); var mySwiper = new Swiper('.swiper-container', { autoplay: false, // 手指滑动模块切换tab onSlideChangeEnd: function(swiper){ changeTab(swiper.activeIndex) } }); //tab点击切换silde tabItem.click(function(){ var ind = $(this).index(); changeTab(ind); mySwiper.slideTo(ind); }); //tab切换样式 function changeTab(index){ tabItem.removeClass('active').eq(index).addClass('active'); } </script></body></html>
素颜马尾好姑娘i
灰太狼
太过爱你忘了你带给我的痛
今天药忘吃喽~
左手的ㄟ右手
还没有评论，来说两句吧...