Как запомнить последнюю вкладку, используемую после отправки/обновления?

Question

Я использую вкладку jQuery на своей веб-странице, но хочу, чтобы она запомнила последнюю используемую вкладку, после того, как форма sumbit или когда пользователь нажимает на ссылку и затем возвращается к закладке. Как я могу запомнить последнюю вкладку, используемую после обновления страницы, или перейти к другой ссылке. Ни один из примеров я нашел вокруг чистой работы до сих пор, у меня этот код до сих пор:

<div id="content-container"> 
    <div id="page-content"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="tab-base"> 
        <ul class="nav nav-tabs"> 
         <li class="active"> 
          <a data-toggle="tab" href="#demo-lft-tab-1">Tab1</a> 
         </li> 
         <li> 
          <a data-toggle="tab" href="#demo-lft-tab-2">Tab2</a> 
         </li> 
         <li> 
          <a data-toggle="tab" href="#demo-lft-tab-3">Tab3</a> 
         </li> 
         <li> 
          <a data-toggle="tab" href="#demo-lft-tab-4">Tab4</a> 
         </li> 
        </ul> 
        <div class="tab-content"> 
         <div id="demo-lft-tab-1" class="tab-pane fade active in"></div> 
         <div id="demo-lft-tab-2" class="tab-pane fade"></div> 
         <div id="demo-lft-tab-3" class="tab-pane fade"></div> 
         <div id="demo-lft-tab-4" class="tab-pane fade"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>   
</div>   
<script> 
    var lastTab = localStorage.getItem('lastTab'); 
    if (!lastTab) { 
     lastTab = 0; 
    } 
    $(".tab-base").tabs({ 
     activate: function(event, ui) { 
      //if another tab is activate, save it's index to the localStorage 
      localStorage.setItem('lastTab', ui.newTab.index()); 
     }, 
     //set the corresponding tab to active 
     active: lastTab 
    }); 
</script> 

Answer 1

попробовать этот

$(function() { 
      $(".tab-base").tabs({ 
       activate:function(event,ui){ 

       localStorage.setItem("lastTab",ui.newTab.index()); 
       }, 
       active: localStorage.getItem("lastTab") || 0 
      }); 
     }); 

можно проверить здесь, перейдя по вкладке и обновив страницу. https://jsbin.com/

Answer 2

CONCEPT: Хранить данные в куки и получить его на странице загрузки.

document.cookie = "tab=foo"; 

Полный пример реализации:

http://jsfiddle.net/sst9x2pd/

HTML:

<ul class="nav nav-tabs"> 
    <li><a class="addressClick" href="#aaa" data-toggle="tab">AAA</a></li> 
    <li><a class="addressClick" href="#bbb" data-toggle="tab">BBB</a></li> 
    <li><a class="addressClick" href="#ccc" data-toggle="tab">CCC</a></li> 
</ul> 
<div class="tab-content" id="tabs"> 
    <div class="tab-pane" id="aaa">...Content...</div> 
    <div class="tab-pane" id="bbb">...Content...</div> 
    <div class="tab-pane" id="ccc">...Content...</div> 
</div> 

JS:

$('.nav-tabs a[href="'+getCookie('lastTab')+'"]').tab('show'); 


$(".addressClick").click(function() { 
     var addressValue = $(this).attr("href"); 
    console.log(addressValue); 
     setCookie('lastTab', addressValue, 100); 
    }); 
function setCookie(cname, cvalue, exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires="+ d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
} 
function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i = 0; i <ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') { 
      c = c.substring(1); 
     } 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length,c.length); 
     } 
    } 
    return ""; 
}