Question

我在项目中使用bootstrap实现了nav-tabs。当我们进入应用程序时，Home选项卡处于活动状态。当我在其他选项卡中进行更改并按下save按钮时，页面将转到Home选项卡。

我希望我已做出更改的标签处于活动状态。

以下是我在项目中使用过的类似代码。

HTML

<div class="nav">
         <div class="container">
        <div class="tabbable">
    <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#about">About</a></li>
    <li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
    <li><a data-toggle="tab" href="#search">Search</a></li>
    <li><a data-toggle="tab" href="#logout">Logout</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="home">
        <h1>Hospital Data Solutions</h1>
        <p>Financial Analysis Database</p>
    </div>
    <div class="tab-pane" id="about">
        <h1>About Us</h1>
        <p>Cost Reports and Financial Analysis Nationwide Database</p>
    </div>
    <div class="tab-pane" id="subscribe">
        <h1>Annual Subscription</h1>
        <p>Purchase an annual subscription to access all cost reports.</p>
    <h2>Individual Cost Reports</h2>
    <p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
    </div>
    <div class="tab-pane" id="search">
        <h1>Search our database</h1>
        <p>Search content goes here.</p>
    </div>
    <div class="tab-pane" id="logout">
        <h1>logout</h1>
        <p>Logout fx goes here.</p>
    </div>
            </div>
        </div>  
    </div>
</div>

小提琴here

Answer 1

基本上，您需要做的是在进入页面时将active类添加到<li>标记，并将其从其他<li>元素中删除。< / p>

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

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

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

Cookie：每次点击标签
浏览器的本地存储或会话存储。与1
位置 - 哈希：请看马丁·莱泽的答案。
网址 - 参数：您可以使用它们来记住应用状态，但我建议不要使用它，因为通常您不希望在网址中包含此类信息。

1和2是持久性的，这意味着，明天你可以回来，应用程序可以使用相同的状态初始化

3和4不是持久性的，每次进入应用程序时都需要传递该信息（在会话期间没问题）

希望有所帮助。

Answer 2

首先，您需要将选定的标签哈希添加到网址。这是JQuery的一个例子：

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

接下来，您需要在加载页面时显示链接到添加到网址的哈希的标签：

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

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

2 个答案: