三、idangerous.swiper实现点击tab切换

最新推荐文章于 2022-11-01 10:26:20 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2022-11-01 10:26:20 发布

阅读量554

点赞数

分类专栏： css js 文章标签： tab切换

本文链接：https://blog.csdn.net/weixin_42645716/article/details/102918793

版权

js 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

css

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;}

        .wrap{margin:100px auto 0 auto;}
        .tabs{height:40px;}
        .tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:40px;font-size:16px;text-decoration:none;}
        .tabs a.active{color:#fff;background:#333;border-radius:5px 5px 0px 0px;}
        .swiper-container{background:#333;height:325px;border-radius:0 0 5px 5px;width:100%;border-top:0;}
        .swiper-slide{height:325px;width:100%;background:none;color:#fff;}
        .content-slide{padding:40px;}
        .content-slide p{text-indent:2em;line-height:1.9;}
    </style>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
</head>
<body>
    <div class="wrap">
        <div class="tabs">
            <a href="#" hidefocus="true" class="active">手机端</a>
            <a href="#" hidefocus="true">选项卡</a>
            <a href="#" hidefocus="true">切换效果</a>
        </div>    
        <div class="swiper-container">
            <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="content-slide">
                <h2>AAAAAAAAAAAAAAAAAAAAA</h2>
                <p>AAAAAAAAAAAAAAAAAAAAA</p>
                <p>AAAAAAAAAAAAAAAAAAAAA</p>
                <p>AAAAAAAAAAAAAAAAAAAAA</p>
            </div>
            </div>
            <div class="swiper-slide">
                <div class="content-slide">
                <h2>BBBBBBBBBBBBBBBBBB</h2>
                <p>BBBBBBBBBBBBBBBBBB</p>
                <p>BBBBBBBBBBBBBBBBBB</p>
                <p>BBBBBBBBBBBBBBBBBB</p>
            </div>
            </div>
            <div class="swiper-slide">
                <div class="content-slide">
                <h2>CCCCCCCCCCCCCCCCCCCCCCCC</h2>
                <p>CCCCCCCCCCCCCCCCCCCCCCCC</p>
                <p>CCCCCCCCCCCCCCCCCCCCCCCC</p>
                <p>CCCCCCCCCCCCCCCCCCCCCCCC</p>
            </div>
            </div>
        </div>
    </div>
    </div>

    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" src="js/idangerous.swiper.min.js"></script> 
    <script type="text/javascript">
    var tabsSwiper = new Swiper('.swiper-container',{
        speed:500,
        onSlideChangeStart: function(){
            $(".tabs .active").removeClass('active');
            $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
        }
    });

    $(".tabs a").on('touchstart mousedown',function(e){
        e.preventDefault()
        $(".tabs .active").removeClass('active');
        $(this).addClass('active');
        tabsSwiper.swipeTo($(this).index());
    });

    $(".tabs a").click(function(e){
        e.preventDefault();
    });
    </script>
</body>
</html>

混迹在开发队伍里的伪开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三、idangerous.swiper实现点击tab切换

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <met...
复制链接

扫一扫