Wie erhalte ich das aktuelle Element in der Navigationsleiste und speichere localStorage?

Question

Ich habe eine Navigationsleiste, dies hat eine Links zu Seiten, ich möchte das aktuelle Nav aktiv speichern, wenn ich darauf geklickt habe, dies, weil ich ein gleiches Menü auf den anderen Seiten habe.

<ul> 
<li id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li> 
<li class="navigation-item"><a href="#" >Nav 2</a></li> 
<li class="navigation-item"><a href="#" >Nav 2</a></li> 
<li class="navigation-item"><a href="#" >Nav 2</a></li> 
</ul> 

ich versuche, von $(this) zu bekommen und dann verwenden, nachdem die Seite, um neu zu laden wird die Klasse aktiv hinzuzufügen.

$(document).ready(function() { 

    $('.navigation-item').on('click', function (e) { 
     var current = $(this); 
     console.log(current); 
     console.log(JSON.stringify(current)); 
     localStorage.setItem('activeTab', current); 
    }); 

    var activeTab = localStorage.getItem('activeTab'); 

    if (activeTab) { 
    // activeTab.addClass('active'); 
    // $('#nav1').parent().addClass('active'); 
     console.log(activeTab); 
     $("ul li:nth-child(2)").append("<span> - 2nd!</span>"); 
    } 

}); 

jsFiddle

Mit freundlichen Grüßen.

Answer 1

Sie müssen den Index des Elements speichern:

$('.navigation-item').on('click', function (e) { 
    var current = $(this); 
    console.log(current); 
    console.log(JSON.stringify(current)); 
    localStorage.setItem('activeTab', $('.navigation-item').index(current)); 

}); 

Und dann verwenden Sie den Index des Elements zurück zu bekommen:

var activeTab = localStorage.getItem('activeTab'); 
if (activeTab) { 
     activeTabEL = $('.navigation-item').eq(parseInt(activeTab)); 
    activeTabEL.addClass('active'); 
    // $('#nav1').parent().addClass('active'); 
    console.log(activeTabEL); 
    $("ul li.navigation-item").eq(parseInt(activeTab)).append("<span> - 2nd!</span>"); 
} 

Beispiel: https://jsfiddle.net/xmzb7hdk/7/

Answer 2

Sie don‘ Ich brauche viel JavaScript. Sie können ein HTML5 benutzerdefinierte Attribute verwenden, um jedes Element in der nav (data-nav-item) zu identifizieren: es

<ul> 
    <li data-nav-item="nav-1" id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li> 
    <li data-nav-item="nav-2" class="navigation-item"><a href="#" >Nav 2</a></li> 
    <li data-nav-item="nav-3" class="navigation-item"><a href="#" >Nav 2</a></li> 
    <li data-nav-item="nav-4" class="navigation-item"><a href="#" >Nav 2</a></li> 
</ul> 

Dann ist nur eine einfache 3 Zeilen JavaScript um den Wert einzustellen:

$(document).on("click", "[data-nav-item]", function(event) { 
    localStorage.setItem("activeTab", this.getAttribute("data-nav-item")); 
}); 

Danach werden Sie Verwendung können den aktiven nav identifizieren:

var activeTab = $("[data-nav-item='" + localStorage.getItem("activeTab") + "']") 

Answer 3

Sie die id speichern kann stattdessen das gesamte Objekt zu speichern. Es vereinfacht die Verwendung beim Abruf.

Fiddle here

HTML:

<ul> 
    <li id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li> 
    <li id="nav2" class="navigation-item"><a href="#" >Nav 2</a></li> 
    <li id="nav3" class="navigation-item"><a href="#" >Nav 3</a></li> 
    <li id="nav4" class="navigation-item"><a href="#" >Nav 4</a></li> 
</ul> 

Script:

$(document).ready(function() { 

    $('.navigation-item').on('click', function (e) { 
     var currentID = $(this).attr("id"); 
     console.log(currentID+" = stored to localStorage"); 
     localStorage.setItem('activeTab', currentID); 

    }); 

    var activeTab = localStorage.getItem('activeTab'); 
    if (activeTab!="") { 
     console.log(activeTab+" = retrieved form localStorage"); 
     $("#"+activeTab).append("<span> - active!</span>"); 
     $("#"+activeTab).addClass('active'); 
    } 

});