引导选项卡不适用于 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 选项的主要内容,如果未能解决你的问题,请参考以下文章