引导选项卡不适用于历史记录.返回选项

bootstrap tabs not working for history.back option

本文关键字：选项 历史 记录 适用于 返回 不适用      更新时间：2023-09-26

我在网页中使用了引导选项卡

        <ul id="myTab" class="nav nav-tabs tab_new_vir" role="tablist">
    <li role="presentation" class="active"><a href="#tab1" id="tab1-tab" role="tab" data-toggle="tab" aria-controls="tab1-tab" aria-expanded="true" class="goto">Tab 1</a><span> | </span></li> 
    <li role="presentation"><a href="#tab2" role="tab" id="tab2-tab" data-toggle="tab" aria-controls="tab2-tab" class="goto">Tab 2</a><span> | </span></li>
    <li role="presentation"><a href="#tab3" role="tab" id="tab3-tab" data-toggle="tab" aria-controls="tab3" class="goto">Tab 3</a><span> | </span></li>
    <li role="presentation"><a href="#tab4" role="tab" id="tab4-tab" data-toggle="tab" aria-controls="tab4" class="goto">Tab 4</a></li>
    </ul>

通过单击链接，将打开相应的选项卡。

通过单击浏览器后退按钮，相应的选项卡不会打开。

为此，我使用了以下代码：

$('.goto').click(function (e) {
        e.preventDefault();
        history.pushState( null, null, $(this).attr('href') );
    });

这是有效的。

默认情况下，选项卡 1 处于打开状态。现在我单击 tab2、3 和 4。

通过单击浏览器后退按钮，它会相应地打开选项卡 3,2

但选项卡 1 未打开。此时网址是（http://url.com 而不是 http://url.com/#tab1）

如何解决这个问题。请帮助我

删除class="active"并让他或她选择^^，通常它应该可以工作。

<li role="presentation">
    <a href="#tab1" id="tab1-tab" role="tab" data-toggle="tab" aria-controls="tab1-tab" aria-expanded="true" class="goto">
        Tab 1
    </a>
    <span> | </span>
</li>
相关文章：