引导选项卡不适用于 history.back 选项

Posted

技术标签:

【中文标题】引导选项卡不适用于 history.back 选项【英文标题】:bootstrap tabs not working for history.back option 【发布时间】:2015-05-15 22:34:51 【问题描述】:

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

        <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') );
    );

这是有效的。

默认情况下,tab1是打开的。现在我点击tab2、3、4。

通过点击浏览器的返回按钮,它会相应地打开标签3,2

但是标签 1 没有打开。当时的url是(http://url.com而不是http://url.com/#tab1)

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

【问题讨论】:

我认为您无法对浏览器操作执行任何操作,并且当您按下后退按钮时页面不会加载 【参考方案1】:

删除 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> 

【讨论】:

以上是关于引导选项卡不适用于 history.back 选项的主要内容,如果未能解决你的问题,请参考以下文章

禁用的字段集内的引导选项卡不适用于Firefox

引导选项卡中的谷歌地图

从选项卡注销,不适用于所有其他选项卡

为啥专注于输入框和选项不适用于引导模式?

window.history.back();不适用于共享点页面布局

标题导航栏的下拉列表不适用于页面选项卡