Ich versuche, eine Probe-Header-Navigation zu erstellen, die dynamisch .Current Klasse zu jedem Menü Link hinzufügt, die angeklickt wird. Ich versuche dies mit JavaScript und/oder jQuery mit mehreren HTML-Seiten zu erreichen.
Bekannte Fehler in
suchen Im Augenblick ist die .Current Klasse einfach auf kurz blinkt, wenn Link geklickt wird, wird aber sofort entfernt.
Die protokollierte Nachricht, auf die der Navigationslink geklickt wurde, verbleibt nicht in der Konsole. Blinkt momentan kurz und wird sofort entfernt.
Fragen
Ist es möglich, .Current Klasse zu jedem Link die geklickt wird unter Verwendung mehrerer .html Seiten oder wäre ich besser mit so etwas wie MVC oder einen Rahmen, um dynamisch hinzufügen/entfernen, wie angular.js?
Wäre es besser, das jQuery-Referenzskript unten auf der Seite direkt vor dem schließenden body-Tag zu haben?
Beispielprojekt
Aussehen Meine Header Navigation wie folgt aus:
<nav>
<ul id="headerNav">
<li>
<a id="home" class="headerLink" href="index.html">Home</a>
</li>
<li>
<a id="about" class="headerLink" href="about.html">About</a>
</li>
</ul>
</nav>
Meine script.js Datei sieht wie folgt aus.
/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/
$(document).ready(function() {
'use strict';
console.log("dom is ready!");
initHeaderNavLinks();
});
function initHeaderNavLinks() {
console.log("initializing header nav links...");
// add current class to first link in header navigation
$('#headerNav li:first a').addClass("current");
}
$('.headerLink').click(function() {
var clickedId = $(this).attr('id');
var msg = "";
msg = "clickedId: " + clickedId;
console.log(msg);
$(this).addClass('current');
});
Hier ist mein Beispielprojekt in Plunker. https://plnkr.co:443/pVPDBfjmhqaIwnMEtMgm
UPDATE
Für diejenigen, die interessiert sind, fand ich eine Lösung, die am besten für meine aktuellen Bedürfnisse funktioniert und mein Code vereinfacht. Ich beschloss, die Variable currentPageID direkt auf jeder Seite in ein Skript-Tag einzubetten.
Aktualisiert Projekt
hat dieses Script-Tag an den Kopf jeder Seite
<script>
var currentPageID = "about";
</script>
jetzt My Header Navigation wie folgt aussehen:
<nav>
<ul>
<li>
<a id="home" href="index.html">Home</a>
</li>
<li>
<a id="about" href="about.html">About</a>
</li>
</ul>
</nav>
Meine script.js Aussehen Datei so was.
/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/
$(document).ready(function() {
'use strict';
console.log("dom is ready!");
console.log("currentPageID: " + currentPageID);
$("#" + currentPageID).addClass('current');
});
Hier ist meine aktualisierte Plunker Projekt https://plnkr.co/pVPDBfjmhqaIwnMEtMgm
Die Seite wird aktualisiert, wenn Sie auf 'a' klicken, das auf einer anderen Seite navigiert und das' script' zurücksetzt – Rayon
Um zu bekämpfen, was @Rayon gesagt hat, können Sie 'localStorage' verwenden, um die Navigationsschaltfläche zu speichern das wurde angeklickt und bekommt das wenn die Seite geladen wird. Dies erfordert ein wenig mehr Arbeit, um zuverlässig zu sein, aber das sollte funktionieren. Eine andere Sache wäre, stattdessen die 'html'-Seiten dynamisch in einen Container auf Ihrer aktuellen Seite zu laden. – Adjit
Nicht sicher, ob dies das gleiche ist, was Adjit gesagt hat, aber Sie könnten eine Session-Variable verwenden, um zu bestimmen, welcher Link die 'current'-Klasse haben soll. Setzen Sie es auf Ihre erste Seite laden und jede Seite beziehen sich darauf, wenn sie laden. –