Wie wird die letzte Registerkarte nach dem Senden/Aktualisieren gespeichert?

Question

Ich benutze die Registerkarte jQuery auf meiner Webseite, möchte aber, dass sie sich an die zuletzt verwendete Registerkarte erinnert, nach einem Formularsumbit oder wenn der Benutzer auf einen Link klickt und dann zur Registerkarte zurückkehrt. Wie kann ich mich an den letzten Tab erinnern, der nach der Aktualisierung der Seite oder nach einem anderen Link verwendet wurde? Keines der Beispiele i bisher um das Netz Arbeit gefunden habe, habe ich diesen Code so weit:

<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

versuchen, diese

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

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

können Sie hier überprüfen, indem Sie die Registerkarte auswählen und die Seite aktualisieren. https://jsbin.com/

Answer 2

CONCEPT: Speichern Sie die Daten in einem Cookie und abrufen es beim Laden der Seite.

document.cookie = "tab=foo"; 

vollständige Umsetzung Beispiel:

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 ""; 
}