Twitter Bootstrap Question posted in

Twitter Bootstrap 3 keep Tab on refresh

There where multiple Questions and solutions for the Tab container should keep the last selected tab instead of refreshing the whole page and starting in the first tab again. But the solutions i had wont work with my page. Can someone help me out?
This is my JS

<script type="javascript">
$(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // 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) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});
</script>

And that’s my HTML:

 <ul  id="myTab" class="nav nav-tabs" role="tablist" style="background-color: #3E98E4;">
   <li role="presentation"  class="active"><a href="#kunver" aria-controls="kunver" role="tab" data-toggle="tab" style="  border: 1px solid;
  margin-top: 10%;
  color: #fff;
  background-color: #3C97E4;">Kunden</a></li>

    <li role="presentation"><a href="#erter" aria-controls="erter" role="tab" data-toggle="tab" style="  border: 1px solid;
  margin-top: 10%;
  color: #fff;
  background-color: #3C97E4;">Termine</a></li>

    <a href="logout.php" ><button style="margin-top: 1%;margin-left:1%;
  background-color: #3E98E4;
  color: #fff;
  border-color: #fff;" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right"><span class="glyphicon glyphicon-log-out"></span> Logout</button></a>
  </ul>
Tags:

3

Answers


  1. 0

    Well I’ve made few modifications to your code and it will be as below:

    var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
   $('li.active,.tab-pane.active').removeClass('active');
   //remove active class from both li and tabpane since it will be by default added at page load
   $('[href="' + lastTab + '"]').closest('li').addClass('active');
   //add active to lastTab's parent li using closest
   $(lastTab).addClass('active');
   //also add active to lastTab
}

    DEMO

    UPDATE

    Using native .tab('show') method you can do it as below but again you need to remove active class from previous default element

    var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
  $('li.active,.tab-pane.active').removeClass('active');
  $('[href="' + lastTab + '"]').tab('show');
}

    UPDATED DEMO

    Login or Signup to reply.
  2. 0

    You could just change the hash:

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = $(this).attr('href');
});

    The url will be updated and when the refresh button is clicked it should open the correct tab.

    Login or Signup to reply.
  3. 0

    if you have more than one tab in the page, you can use the following code

    <script type="text/javascript">
$(document).ready(function(){
    $('#myTab').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');        
    }
    $('#charts-tab').on('show.bs.tab', function(e) {
        localStorage.setItem('chartsactiveTab', $(e.target).attr('href'));
    });
    var chartsactiveTab = localStorage.getItem('chartsactiveTab');
    if(chartsactiveTab){
        $('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show');        
    }     
});
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search