单击当前选项卡上的保存后如何重定向到当前选项卡 [英] How to redirect to the current tab after clicking save on the current tab

问题描述

我已经使用引导程序在项目中实现了nav-tabs.进入应用程序后，主页"选项卡处于活动状态.当我在其他选项卡中进行更改并按保存"按钮时，页面将转到主页"选项卡.

I have implemented nav-tabs in my project using bootstrap.When we enter the application,Home tab is active.When i make changes in the other tabs and press save button,the page is going to the Home tab.

我希望在其上进行更改的选项卡处于活动状态.

I want the tab on which i've made changes to be active.

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

The below is similar code i've used in my project.

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>

小提琴此处

推荐答案

看来，基本上需要做的是，在进入页面时，将类active添加到<li>标记中，然后将其删除.来自其他<li>元素.

It seems, basically what you need to do, is to add the class active to the <li> tag, when entering the page, and removing it from other <li> elements.

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

您可以使用jQuery来实现.只需在页面初始化期间设置适当的类即可.如马丁·雷泽(Martin Lezer)在回答中所述，使用jQuery，您还必须将适当的事件绑定到元素:

You could achieve that with jQuery. Just set the appropriate class during page initialization. With jQuery you will also have to bind the appropriate events to the elements, as Martin Lezer explains in his answer:

问题是，如何记住两次刷新之间的应用程序状态.这里有一些可能性:

The question is, how to you remember the state of the application between refreshs. Here are some possibilities:

1. Cookies:每次单击标签时，都使用状态设置Cookie
2. 浏览器的本地存储或会话存储.与1相同的原理
3. 位置哈希:请在此处查看Martin Lezer的答案.
4. URL参数:您可以使用这些参数来记住应用程序状态，但我建议您反对它，因为通常您不想在URL中包含此类信息.

1和2是永久性的，这意味着您明天可以回来，并且应用程序可以以相同的状态进行初始化

1 and 2 are persistent, that means, you can come back tomorrow and the application can init with the same state

3和4不是永久性的，每次进入应用程序时都需要传递该信息(在会话期间可以)

3 and 4 are not persistent, you need to pass that information each time you enter the application (which is fine, during a session)

希望有帮助.

这篇关于单击当前选项卡上的保存后如何重定向到当前选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！