CODEWITHSUNDEEP
twitter-bootstrap
Grand Masta D
Grand Masta D

Reputation: 63

keep the current tab active with twitter bootstrap after a page reload?

I know this question was asked before and answered in the following post:

How do I keep the current tab active with twitter bootstrap after a page reload?

However, given my limited knowledge of scripting, I have not been able to get this to work on my website. After putting the code in my html page the tabs still go to the first and active one on page reload.

Please can someone share a working example of the solution presented in the link above.

My code looks like this:

<div class="tabbable" style="margin-bottom: 8px;">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">My Career Centre</a></li>
          <li class=""><a href="#tab2" data-toggle="tab">Hiring Companies</a></li>
          <li class=""><a href="#tab3" data-toggle="tab">Training Providers</a></li>
          <li class=""><a href="#tab4" data-toggle="tab">Advertise</a></li>
          <li class=""><a href="#tab5" data-toggle="tab">Graduate Opportunities</a></li>
          <li class=""><a href="#tab6" data-toggle="tab">Career Forum</a></li>
        </ul>           
        <script type="text/javascript">
                  $(function() 
                    { 
                      $('a[data-toggle="tab"]').on('shown', function (e) {
                        //save the latest tab; use cookies if you like 'em better:
                        localStorage.setItem('lastTab', $(e.target).attr('id'));
                      });

                      //go to the latest tab, if it exists:
                      var lastTab = localStorage.getItem('lastTab');
                      if (lastTab) {
                          $('#'+lastTab).tab('show');
                      }
                    });
            </script>

        <div class="tab-content" style="padding: 0 5px;">
           <div class="tab-pane active" id="tab1">
                <div class="navbar" style="width:930px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Job Search</a></li>
                        <li><a href="#">Training Programmes</a></li>
                        <li><a href="#">Job Alerts</a></li>
                        <li><a href="#">My Job Applications</a></li>
                        <li><a href="#">My Studies</a></li>
                        <li><a href="http://localhost:8080/nationalcareers/JOBSEEKERS/index.php?category=home&action=received">Received Messages</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
           <div class="tab-pane" id="tab2">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Manage Your Job Adverts</a></li>
                        <li><a href="#">Browse CV's</a></li>
                        <li><a href="#">Manage Job Applications</a></li>
                        <li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=postings&action=my">View Reports For Your Adverts</a></li>
                        <li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=home&action=sub_accounts">Manage Sub-Accounts</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
          </div>
          <div class="tab-pane" id="tab3">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Browse Training Programmes</a></li>
                        <li><a href="#">Browse Featured Training Providers</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
           <div class="tab-pane" id="tab4">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Training Programmes</a></li>
                        <li><a href="#">Your Company</a></li>
                        <li><a href="#">Your Recruitment Agency</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
           <div class="tab-pane" id="tab5">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Search Current Opportunities</a></li>
                        <li><a href="#">News and Updates</a></li>
                        <li><a href="#">Events</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
          </div>
          <div class="tab-pane" id="tab6">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Career Advice</a></li>
                        <li><a href="#">CV/Resume</a></li>
                        <li><a href="#">Interview Preparation</a></li>
                        <li><a href="#">Career Net-Work</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
        </div>
        </div>
</div>

Highly appreciated,

Upvotes: 6

Views: 14005

Answers (3)

hrvoj3e
hrvoj3e

Reputation: 2754

2024 update for Bootstrap 5.3 with jQuery loaded

let activeTab;
$('#myTabWrapper a[data-bs-toggle=tab]').on('show.bs.tab', function(e) {
    activeTab = $(e.target).attr('data-bs-target');
    localStorage.setItem('myTabWrapperActiveTab', activeTab);
});
if (activeTab = localStorage.getItem('myTabWrapperActiveTab')){
    let bsTab, tabEl = $('#myTabWrapper a[data-bs-target="' + activeTab + '"]').get(0);
    if (bsTab = bootstrap.Tab.getOrCreateInstance(tabEl)) {
        bsTab.show();
    }
}

If not using jQuery then vanilla JS will be

let activeTab;
document.querySelector('#myTabWrapper a[data-bs-toggle=tab]').addEventListener('shown.bs.tab', function(e) {
    activeTab = e.target.getAttribute('data-bs-target');
    localStorage.setItem('myTabWrapperActiveTab', activeTab);
});
if (activeTab = localStorage.getItem('myTabWrapperActiveTab')){
    let bsTab, tabEl = document.querySelector('#myTabWrapper a[data-bs-target="' + activeTab + '"]');
    if (bsTab = bootstrap.Tab.getOrCreateInstance(tabEl)) {
        bsTab.show();
    }
}

Upvotes: 0

ndemoreau
ndemoreau

Reputation: 3869

I prefer to use a pushstate.

It seems more like "The web way..." to me and it allows me to have external links pointing right to the tab I want to show.

This is my function:

function setBootstrapTabs()
{
    var activeTab = "#" + getParameterByName("submenu");

    $('a[data-toggle="tab"]').on('shown', function () {
        //save the latest tab;
        var new_url = updateUrlParam("submenu",
            $(this).attr('href').replace("#",""));
        window.history.replaceState({
                turbolinks: true, position: Date.now()
            }, document.title, new_url
        );
    });

    if (activeTab.length > 0) {
        $('a[href=' + activeTab + ']').tab('show');
    }
};

Upvotes: 2

Bass Jobsen
Bass Jobsen

Reputation: 49054

As Tommi Komulainen wrote: e.target contains the full url including the hash. You only need the hash. So use e.target.toString().split('#')[1]); or even better $(this).attr('href') $('#'+lastTab).tab('show'); applies the .tab() on the div with id = #{lastTab} while you need to apply on the link (a tag) with data-toggle. So use: $('a[href=#' + lastTab + ']').tab('show'); here.

The complete function to use:

                  $(function() 
                    { 
                      $('a[data-toggle="tab"]').on('shown', function () {
                        //save the latest tab; use cookies if you like 'em better:
                        localStorage.setItem('lastTab', $(this).attr('href'));
                       });

                      //go to the latest tab, if it exists:
                      var lastTab = localStorage.getItem('lastTab');
                      if (lastTab) {
                         $('a[href=' + lastTab + ']').tab('show');
                      }
                      else
                      {
                        // Set the first tab if cookie do not exist
                        $('a[data-toggle="tab"]:first').tab('show');
                      }
                  });

update: see https://stackoverflow.com/a/16016592/1596547 so remove the active class from your source and set the first tab active when lastTab is not set.

Upvotes: 17

Related Questions