How to redirect to the current tab after clicking save on the current tab

Question

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>

Fiddle here

Possible duplicate: http://stackoverflow.com/questions/18999501/bootstrap-3-keep-selected-tab-on-page-refresh http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload http://stackoverflow.com/questions/16808205/keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload — Bruno Pessanha, Nov 27 '15 at 11:20

score 2 · Answer 1 · answered Nov 27 '15 at 11:23

First, you need to add the selected tab hash to the url. Here's an example with JQuery :

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

Next, you need to show the tab linked to the hash added to the url when you load the page :

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

score 2 · Answer 2 · answered Nov 27 '15 at 11:28

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>

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:

Cookies: Set a cookie with the status, each time you click on a tab
Local storage or session storage of the browser. Same principle as 1
Location-Hash: see answer of Martin Lezer here.
URL-Parameters: You could use those to remember the app-state, but I would recommend against it, because usually you do not want to have this kind of information in the URL.

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

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

Hope that helps.

How to redirect to the current tab after clicking save on the current tab

2 Answers2

Linked