Javascript 如何在单击当前选项卡上的“保存”后重定向到当前选项卡

我已经在我的项目中使用引导实现了导航选项卡。当我们进入应用程序时，“主页”选项卡处于活动状态。当我在其他选项卡中进行更改并按下“保存”按钮时，页面将转到“主页”选项卡

我希望已对其进行更改的选项卡处于活动状态

下面是我在项目中使用的类似代码

HTML

---

Fiddle

首先，您需要将所选选项卡哈希添加到url。 以下是JQuery的一个示例：

$('a[data-toggle="tab"]').click(function(e) {
     var hash = $(this).attr('href');
     location.hash = hash;
});

接下来，您需要显示链接到加载页面时添加到url的哈希的选项卡：

$(function() {
    var hash = window.location.hash;
    var $nav = $('ul.nav a[href="' + hash + '"]');
    hash && $nav.trigger('click');
});

---

看起来，基本上您需要做的是，在进入页面时，将活动类添加到标记中，并将其从其他元素中删除

<li class="active">
    <a data-toggle="tab" href="#about" aria-expanded="false">
        About
    </a>
</li>

您可以通过jQuery实现这一点。只需在页面初始化期间设置适当的类。使用jQuery，您还必须将适当的事件绑定到元素，正如Martin Lezer在回答中所解释的：

问题是，如何在刷新之间记住应用程序的状态。以下是一些可能性：

Cookies：每次单击选项卡时，设置一个具有状态的cookie 浏览器的本地存储或会话存储。与1相同的原则 位置散列：请参见此处的Martin Lezer答案。 URL参数：您可以使用这些参数来记住应用程序状态，但我建议您不要这样做，因为通常您不希望在URL中包含此类信息。 1和2是持久的，这意味着您可以明天返回，应用程序可以使用相同的状态初始化

3和4不是持久性的，您需要在每次进入应用程序时传递该信息，这在会话期间是正常的

希望有帮助。

可能的重复：

<li class="active">
    <a data-toggle="tab" href="#about" aria-expanded="false">
        About
    </a>
</li>