SOURCE

console 命令行工具 X clear

                    
>
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>
/* reset wap */
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;
}

本项目引用的自定义外部资源