Zeige letztes aktives div auf Refresh JS

Question

Ich habe eine ziemlich einfache Navigations-Registerkarte auf einer Single-Page-Website, die divs zeigt/versteckt. Wenn ich die Seite jedoch aktualisiere, geht sie zurück zum "page" div der Landung, anstatt auf dem aktuellen Tab zu bleiben. Ich bin mit dem folgenden JS zwischen den Tabs zu wechseln, und ich würde diese Methode halten möchten verwenden, wenn möglich:

var links = document.getElementById('navs').getElementsByTagName('a'); 

for(var i = 0, link; link = links[i]; i++) { 
    link.onclick = showContent; 

    // Hide content divs by default 
    var contentdiv = getContentDiv(link) 
    if (contentdiv == null){ 
     continue; 
    } 
    contentdiv.style.display = 'none'; 
} 

// Show the first content div 
if(links.length > 0) showContent.apply(links[0]); 
var current; 

function showContent() { 

    // hide old content 
    if(current) current.style.display = 'none'; 

    current = getContentDiv(this); 
    if(!current) return true; 

    current.style.display = 'inline-block'; 

    return true; 

} 

function getContentDiv(link) { 

    var linkTo = link.getAttribute('href'); 
    console.log(linkTo); 

    // Make sure the link is meant to go to a div 
    if(linkTo.substring(0, 2) != '#!') return; 
    linkTo = linkTo.substring(2); 
    return document.getElementById(linkTo); 

} 

Ich weiß, dass es auf die Landung div frischt wegen if(links.length > 0) showContent.apply(links[0]); aber ich hatte gehofft, dies zu nutzen Methode und speichern sie den Link Iterationszahl in einer variablen namens current_link und dann in der Lage sein zu nennen if(links.length > 0) showContent.apply(links[current_link]); oder sogar if(links.length > 0) showContent.apply(current_link);

ich ein paar Möglichkeiten ausprobiert habe, aber es endet entweder nur den ersten oder letzten Reiter in der Navigationsleiste sparen. Außerdem wird die Seite auf das Standarddiv aktualisiert, aber die URL bleibt unverändert. EX. Die URL ist http://example.com/#!tab1 auch wenn die Seite http://example.com/#!home

Dies ist der HTML angezeigt wird:

<nav class="navbar navbar-fixed-top" id= "navs" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <div class="navbar-brand"> 
         <a id="logo" href="#!home"><img id="logo-pic" src="images/name.png" alt="" width="50%" height="auto"></a> 
        </div> 
       </div> 
       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="navbar" id="navbar-collapse-1"> 
         <ul class="nav navbar-right navbar-nav"> 
          <a href="#!home"></a> 
          <li class="dropdown"> 
           <a href="#!tab1">tab1</a> 
          </li> 
          <li> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">tab2</a> 
             <ul class="dropdown-menu dropdown-menu-right pull-center"> 
              <li><a href="#!tab21">tab21</a></li> 
              <li><a href="#!tab22">tab22</a></li> 
             </ul> 
          </li> 
          <li> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">tab3</a> 
             <ul class="dropdown-menu dropdown-menu-right pull-center"> 
              <li><a href="images/about/Resume2016.pdf" target="_blank">resume</a></li> 
              <li><a href="#!tab31">tab31</a></li> 
              <li><a href="#!tab32">tab32</a></li> 
             </ul> 

          </li> 
          <li> 
           <a href="#!tab4">tab4</a> 
          </li> 
          <li> 
           <a href="#!tab5">tab5</a> 
          </li> 
         </ul> 
       </div> 
      </div> 
     <!-- /.container --> 
</nav> 

Answer 1

Der beste Weg, Seite Zustand andauern wird die URL Geschichte zu nutzen.

z. wenn der Benutzer auf eine Registerkarte klickt, anstatt nur die Navigation zu tun:

window.addEventListener('hashchange',() => ...);

So Sie:

• eine hashchange Ereignishandler

window.onhashchange =() => { ... };

oder erstellen könnte etwas tun wie:

const navigate =() => open_tab(location.hash.substr(1)); // get rid of the '#' 
window.addEventListener('hashchange', navigate); 

Sie wollen auch navigieren, wenn die Seite geladen wird:

navigate();

• Nun, wenn der Benutzer eine Registerkarte klickt, oder was auch immer, die Hash-Wert des Standorts Seite ändern:

location.hash = "tab1";

Dies ist ein wenig zusätzliche Arbeit, aber die Vorteile sind riesig:

• die Seite zu aktualisieren funktioniert wie erwartet
• Wenn der Benutzer die Seite Lesezeichen, Lesezeichen sie den Zustand des UI
• Vorwärts- und Rückwärtsnavigation jetzt wie erwartet.