基于swiper做的tab，滑动切换时tab栏无法一起切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TAB测试</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0
            }
            
            li {
                list-style: none
            }

            .box {
                margin: 50px auto;
                width: 800px
            }

            .swiperTab {
                display: flex;
                width: 100%;
                flex-direction: row;
                justify-content: center;
                align-items: center
            }

            .swiperTab li {
                display: flex;
                height: 48px;
                border-left: 1px solid #dfdfdf;
                background-color: #ddf8ff;
                cursor: pointer;
                flex: 1;
                flex-direction: row;
                justify-content: center;
                align-items: center
            }

            .swiperTab li:first-child {
                border-left: 1px solid transparent
            }

            .swiperTab li.active {
                background-color: #f60;
                color: #fff
            }

            .swiperTab li:nth-child(1).active {
                background-color: red;
            }

            .swiperTab li:nth-child(2).active {
                background-color: green;
            }

            .swiperTab li:nth-child(3).active {
                background-color: blue;
            }

            .swiper-slide {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 20px
            }

            .swiper-slide:nth-child(1) {
                height: 300px;
                background-color: red;
            }

            .swiper-slide:nth-child(2) {
                height: 300px;
                background-color: green
            }

            .swiper-slide:nth-child(3) {
                height: 300px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul class="swiperTab">
                <li> <span>TAB-01</span> </li>
                <li> <span>TAB-02</span> </li>
                <li> <span>TAB-03</span> </li>
            </ul>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">111111111111111</div>
                    <div class="swiper-slide">222222222222222</div>
                    <div class="swiper-slide">333333333333333</div>
                </div>
            </div>
        </div>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
        <script type="text/javascript">
            function tabs(obj, swiperObj, className, index) {
                var tabSwiper = new Swiper(swiperObj, {
                    initialSlide: index, // 设定初始化时slide的索引
                    speed: 500, //滑动速度，单位ms
                    autoHeight: true, //高度随内容变化
                    onSlideChangeStart: function() {
                        if (tabSwiper) {
                            /*判断tabSwiper是否存在，否则当哈希值不为0的时候会报错 */
                            $(obj + "." + className).removeClass(className); /*有当前类名的删除类名,给下一个添加当前类名*/
                            $(obj).eq(tabSwiper.activeIndex).addClass(className); /*activeIndex是过渡后的slide索引*/
                        }
                    }
                });
                // 模拟点击事件，如果是移入事件，将mousedown 改为 mouseenter
                $(obj).on('touchstart mousedown', function(e) {
                    e.preventDefault();/*清除默认事件*/
                    $(obj + "." + className).removeClass(className);
                    $(this).addClass(className);/*点击当前导航 改变当前样式*/
                    tabSwiper.slideTo($(this).index());/*滑动到对应的滑块*/
                    
                });
                $(obj).click(function(e) {
                    e.preventDefault();/*清除默认点击事件*/
                });
            }
        </script>

        <script>
            /*swiper选项卡切换*/
            var i=$(this).index();
            $(function() {
                //swiperTab 是你导航的className,active是你当前状态的className
                $('.swiperTab > li').eq(0).addClass('active');
                tabs('.swiperTab > li', '.swiper-container', 'active');
            });
        </script>
    </body>
</html>
Forever丶前端
浏览 3650回答 3
3回答

随时随地看视频慕课网APP