JS: Die Angabe aktuelles Elements im Menü

Question

Ich habe ein Menü:

<ul> 
    <li id="active"><a href="/">Головна</a></li> 
    <li><a href="/about/">Про компанію</a></li> 
    <li><a href="/work/">Діяльність</a></li> 
    <li><a href="/initiative/">Ініціативи</a></li> 
    <li><a href="/statti/">Статті</a></li> 
</ul> 

Können Sie eine Art und Weise id = aktive Attribute für diese Liste zu ändern. Wenn ich zum Beispiel ungefähr geklickt habe, möchte ich, dass dieses li-Element als aktiv markiert wird.

Danke

Answer 1

Es gibt an elegant css method von Styling der currentl y aktiver Navigationsstatus ohne JavaScript oder serverseitige Unterstützung. Im Grunde genügt eine ID (z. B. als Körper-ID-Attribut), die den Navigationszustand eindeutig identifiziert, um css-Selektoren zu erzeugen, die den aktiven Zustand hervorheben.

Answer 2

Verwenden Sie Klasse, nicht ID. Der Grund ist, dass ID zum Identifizieren von Elementen dient, was in diesem Fall bedeuten würde, dass das einzige Element auf der Seite, das durch "aktiv" identifiziert wird, dieses wäre, selbst wenn andere Kontexte eine "aktive" Unterscheidung benötigen. Mit der Klasse können Sie mehrere "aktive" Elemente in verschiedenen Kontexten haben und sie ist semantisch korrekter.

Answer 3

Um richtig zu sein, sollten Sie Klasse, nicht ID verwenden, um dies zu tun. (Siehe http://css-discuss.incutio.com/?page=ClassesVsIds für weitere Erklärung Grundsätzlich ids sollte auf die Seite eindeutig sein..)

Sie die Klasse ändern können mit jQuery in Attribut modifizierenden Funktionen eingebaut: http://docs.jquery.com/Attributes

Sehen Sie unter „Klasse“

Answer 4

Wenn Ihr Menü hatte eine ID, lassen Sie uns „xpto“ sagen, die Onclick jeder Verbindung eine Funktion wie diese auslösen könnte:

onclick="setActiveId(this);" 


functionSetActiveId(newActiveElem){ 
    var allElems = document.getElementById('xpto').childNodes; 

    for(var i = 0; i < allElems.length; i++){ 
    allElems[i].id = ''; 
    } 

    newActiveElem.id = 'active'; 
}