console
$(function () {
var tabsSwiper = new Swiper('.swiper-tabs1', {
onSlideChangeStart: function() {
$('.tabs .on').removeClass('on');
$('.tabs a').eq(tabsSwiper.activeIndex).addClass('on');
}
});
$('.tabs a').on('touchstart mousedown', function() {
var _ = $(this);
_.addClass('on').siblings().removeClass('on');
tabsSwiper.slideTo(_.index());
return false;
});
});
<meta name="referrer" content="no-referrer" />
<div class="wrapper">
<div class="tabs">
<a href="javascript:;" class="on">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
</div>
<div class="swiper-container swiper-tabs1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="//ww3.sinaimg.cn/mw690/006BLD6Tgw1f9w38dhlhaj31hc0u077m.jpg">
</div>
<div class="swiper-slide">
<img src="//ww4.sinaimg.cn/mw690/bea70753gw1f9vj12q9rcj21hc0u0dnh.jpg">
</div>
<div class="swiper-slide">
<img src="//ww1.sinaimg.cn/mw690/bea70753gw1f9vj11yq95j21hc0u0aam.jpg">
</div>
</div>
</div>
</div>
body,p,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
margin: 0;
padding: 0;
list-style: none;
}
body {
font: 14px Microsoft YaHei,Arial,sans-serif;
-webkit-tap-highlight-color: rgba(50,50,50,.1);
line-height: 1.5;
color: #2a2b2c;
background: #fff;
}
*, *::before, *::after {
outline: none;
box-sizing: border-box;
}
a,img {
text-decoration: none;
display: block;
color: #2a2b2c;
border: 0;
}
.wrapper {
width: 400px;
max-width: 100%;
margin: 100px auto;
}
.swiper-container {
height: 230px;
overflow: hidden;
border-radius: 2px;
margin-bottom: 10px;
}
.swiper-container img {
width: 100%;
height: 100%;
}
.tabs {
margin-bottom: 10px;
}
.tabs a {
padding: 8px 20px 6px 20px;
border-radius: 2px;
text-align: center;
background: #eee;
display: inline;
}
.tabs a.on {
color: #f44;
}