javascript - 如何使swiper.js在页面返回时保持原来状态
阿神
阿神 2017-04-11 12:43:23
[JavaScript讨论组]

页面中含有swiper.js,当点击第3个块的标签,跳转到下一个页面,下一个页面返回时,原来的页面中已经不是第3块了,而是第1块,我希望时他还能是第3块,同时上面的tab也是对应的第三块。


还是回到了回来状态,但是我希望它是这样的

使用了sessionStorage 就会报错

window.onload = function() {

    $(".tabs").find("a").eq(0).addClass("active");

    var index=0;
    if(sessionStorage.getItem("index")){
        index=sessionStorage.getItem("index");
    }
    //点击页面链接跳转前保存导航当前的index值
    $("a").bind("click",function(){
        var i= $(".swiper-slide-active").index();
        sessionStorage.setItem("index",i);
    });
    var tabsSwiper = new Swiper('#tabs-container',{
        speed:500,
        initialSlide: index,
        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.slideTo( $(this).index());
    });
    $(".tabs a").click(function(e){
        e.preventDefault()
    });
}
阿神
阿神

闭关修行中......

全部回复(1)
伊谢尔伦

嗯,每次进入页面都是一次新的访问,所以都是初始化状态。达到这个要求你需要一个地方记录swiper的index,你可以使用sessionStorage;

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号