Question

我收到了很多用户的抱怨，当他们使用基于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;
        });

Answer 1

您可以使用历史记录。

在打开新标签页时推送历史记录状态

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

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

Answer 2

没有完整的代码，我无法给您定制示例，但您可以简单地将锚标签添加到每个包含div的选项卡中。

这将在用户每次单击选项卡链接时更新URL。这些URL更改将存储在浏览器历史记录中，并在向后导航时被调出。

<div id="Tab1">
  <h2><a href="#Tab1">Tab 1</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab2">
  <h2><a href="#Tab2">Tab 2</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab3">
  <h2><a href="#Tab3">Tab 3</a></h2>
  <p>This tab content</p>
</div>

<div id="Tab4">
  <h2><a href="#Tab4">Tab 4</a></h2>
  <p>This tab content</p>
</div>

每次单击选项卡时，更新的URL都将如下所示：

https://example.com#Tab1

https://example.com#Tab2

https://example.com#Tab3

https://example.com#Tab4

Answer 3

一方面，您的下一个标签页功能是用javascript编写的，另一方面，浏览器中的后退按钮使用浏览器历史记录，因此这与您的功能无关，并且无法将您转到上一个标签页所有。

因此，有两种方法可以实现它：

第一：尝试通过刷新浏览器将步骤加载到不同的页面中，以便该页面保存在浏览器历史记录中，并按返回按钮可以看到上一步

第二：您应该有一个“上一步”按钮来查看上一步，就像下一步按钮一样

Answer 4

我将引导程序选项卡与浏览器选项卡导航一起使用，下面是完整的示例

<div class="tabs-Nav border-top-0">
    <ul class="nav" role="tablist">
        <li>
            <a
            id="friends"
            data-pagination-id="friends"
            class="active"
            data-toggle="tab"
            href="#friendsTab"
            role="tab"
            aria-controls="friends"
            aria-selected="true">
                Friends
            </a>
        </li>
        <li>
            <a id="followers" data-pagination-id="followers" class="" data-toggle="tab" href="#followersTab" role="tab" aria-controls="followers" aria-selected="false">
                Followers
            </a>
        </li>
        <li>
            <a id="followings" data-pagination-id="followings" class="" data-toggle="tab" href="#followingTab" role="tab" aria-controls="followings" aria-selected="false">
                Following
            </a>
        </li>
        <li>
            <a id="invites" data-pagination-id="invites" class="" data-toggle="tab" href="#invitesTab" role="tab" aria-controls="invites" aria-selected="false">
                Invites
            </a>
        </li>
    </ul>
</div>


/**
* add // id="friends" data-pagination-id="friends"
* in your html tabs the demo html is also added.
**/
$(document).ready(function () {
    const param = 'tabID';
    $("[data-pagination-id]").click(function () {

        const pageParam = $(this).attr('data-pagination-param') || param;

        //add tabId to the params
        addParam(pageParam, $(this).attr('data-pagination-id'), true);
    });

    const preTab = getParamVal(param);

    if (param) {
        $('[data-pagination-id="'+ preTab +'"]').click();
    }
});


 /**
 * add params to the url if preParams is false then all previous
 * params will be removed.
 **/
addParam = (pageParam, paramValue, preParams) => {
    //get current url without params
    var mainUrl = window.location.href.split('?')[0];

    //get params without url
    var paramString = location.search.substring(1);

    if (preParams && paramString) { //when params found

        //change param string to json object
        var paramsObj = JSON.parse('{"' + decodeURI(paramString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
    } else {
        //when current params are empty then create an empty object.
        var paramsObj = {};
    }

    //only for ads tabs
    if (pageParam) {
        //add tabId to the params
        paramsObj[pageParam] = paramValue;

        //push params without refreshing the page.
        history.pushState(false, false, mainUrl + '?' + $.param(paramsObj).replace(new RegExp('%2B', 'gi'), '+'));
    }
};

 /**
 * Get value of a params from url if not exists then return null
 **/
getParamVal = (pageParam) => {
    const mainUrl = window.location.href.split('?')[0];
    const paramString = location.search.substring(1);
    const paramsObj = JSON.parse('{"' + decodeURI(paramString).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');

    return paramsObj[pageParam];
};

您可以查看我的代码的实时工作示例

1>转到https://www.notesgen.com（使用台式机）

2>以学生身份创建帐户

3>转到我的帐户/我的下载

4>单击“我的连接”

Answer 5

更改哈希与推送状态history.pushState类似，后者触发popstate事件。在浏览器上前后滑动会弹出并推送这些状态，因此您不需要任何其他自定义处理程序。

PS：您可以从:target类向active添加CSS样式。 window.addEventListener('popstate'只是在日志中向您显示事件，但是event.state在这种情况下将始终为空。

运行代码段，尝试浏览标签页，然后使用浏览器的后退和前进按钮。

<style type="text/css">
    div { display: none }
   :target { display: block }
</style>


  <h2><a href="#Tab1">Tab 1</a> | <a href="#Tab2">Tab 2</a> | <a href="#Tab3">Tab 3</a> | <a href="#Tab4">Tab 4</a></h2>


<div id="Tab1">
  <p>This tab 1 content</p>
</div>

<div id="Tab2">
  <p>This tab 2 content</p>
</div>

<div id="Tab3">
  <p>This tab 3 content</p>
</div>

<div id="Tab4">
  <p>This tab 4 content</p>
</div>

<script>
  (() => {
history.pushState(null, '', '#Tab1');
window.addEventListener('popstate', event => {
 console.log(window.location.hash);
});
})()
</script>

浏览器后退/后退按钮可在选项卡之间导航

5 个答案: