时间戳

首页 > 解决方案 > 用于在选项卡之间导航的浏览器后退/下一个按钮

javascript - 用于在选项卡之间导航的浏览器后退/下一个按钮

问题描述

我收到很多来自用户的抱怨，当他们使用我的基于 jQuery 的选项卡时，他们发现当他们回击浏览器时，他们没有转到上一个选项卡而是转到上一个页面，这很烦人. 我添加了以下上一个/下一个按钮，但还不够。如何重新配置​​我的按钮，以便用户在单击浏览器后退箭头时转到上一个选项卡而不是上一页。你可以在这里测试它。

$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    if (index == 0) {
        index = 1;
    }
    $('.quicktabs-tabs li').eq(index - 1).addClass('active');
    $('.quicktabs-tabs li').eq(index - 1).find('a').click();
    return false;
});
$('.tablink-next').click(function () {
    var length = $('.quicktabs-tabs').first().children().size();;
    var index = $('.quicktabs-tabs li.active').index();
    $('.quicktabs-tabs li').eq(index).removeClass('active');
    //                if (parseInt(index) == parseInt(length) - 1 ) {
    //                    index = index - 1;
    //                }
    if (parseInt(index) == parseInt(length) - 1) {
        window.location.href = '/home'; //redirect to home
        //index = index - 1;
    }
    $('.quicktabs-tabs li').eq(index + 1).addClass('active');
    $('.quicktabs-tabs li').eq(index + 1).find('a').click();
    return false;
});

标签： javascriptjquery

解决方案

您可以使用历史记录。

打开新标签时推送历史状态

history.pushState({page: 1}, "title 1", "?page=1")

参考： https ://developer.mozilla.org/en-US/docs/Web/API/History_API

推荐阅读