Jquery 页面重新加载后显示特定选项卡

以下是我的选项卡的初始状态：

<ul class="nav nav-tabs" id="myTabTabs">
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<li class=""><a href="#publishing" data-toggle="tab">Publishing</a></li>
<li class=""><a href="#process-1" data-toggle="tab">Process: 1</a></li>
<li class=""><a href="#process-2" data-toggle="tab">Process: 2</a></li>
</ul>

但我不知道以后如何显示特定的选项卡。 我尝试了以下方法：

$('.nav-tabs a[href="#process-1"]').tab('show');

但它不起作用

有人能帮我做这个吗

---

谢谢

好的，我为您制作了一个JSFIDLE来解释我的工作，但是JSFIDLE不会向您显示重新加载-您必须将代码复制到一个文件中

由于bootstrap善意地阻止href在单击时设置您的散列，因此您必须自己添加它。然后，您所需要做的就是在页面加载时再次获取它，并在右侧选项卡上“单击”

HTML:

---

参考：

单击选项卡时，它会将哈希添加到我假设的url中。因此，您可以像下面这样从URL加载读取

window.location.hash

，从那里很容易，我只需模拟单击正确的选项卡

window.location.hash

在这里不起作用。另一方面，

event.target.hash

。从那里我该怎么办？我应该修改散列吗？非常感谢您的JSFIDLE。你的代码并不像我期望的那样，但它让我走上了正确的轨道。经过一些修改后，下面是使用上面html选项卡的代码：

（函数（$）{$（窗口）。加载（函数（）{$（'#myTabTabs li a'）。单击（函数（）{window.location.hash=$（this）。attr（'href'）；}）；var hash='#process-1'；//作为一个例子。$（'[href=“'+hash+'”））。触发器（'click'）；}）（jQuery）

老实说，我不是100%确定这里发生了什么，但不管什么都可以。@Duddy67所以你要做的是，如果点击了选项卡，你的url将附加#where location，这样当你重新加载时，你可以再次获取最后一个位置并模拟点击它应该在的位置。另一种方法是使用局部变量保存页面首选项，而不是保存在url中。这取决于什么最适合您。我确信这不是最佳做法，但我觉得它很干净。

$('.nav-tabs a[href="#process-1"]').tab('show');

<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" aria-controls="nav-home">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" aria-controls="nav-profile">Profile</a>
        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" aria-controls="nav-contact">Contact</a>
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">home</div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">profile</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">contact</div>
</div>

var hash = window.location.hash;
$(function() {
    $('#nav-tab a').click(function(){
        window.location.hash = $(this).attr('aria-controls');
    });

    $('[href="'+hash+'"]').trigger('click');
});