Es wird versucht, dem Link, der der aktuellen Seite entspricht, die Klasse 'active' hinzuzufügen, in einem Menü, das in menu.html gespeichert ist und mit JQuery nach index.html gezogen wird.
Ich habe es geschafft, meine Datei menu.html mit JQuery aufzurufen und das Menü in index.html einzufügen. Das CSS-Styling kommt perfekt durch. Da ich jedoch jetzt nicht jedem Menüpunkt einzeln die Klasse 'active' hinzufüge, benötige ich hierfür eine Methode. Ich habe es geschafft, dem Menü eine aktive Klasse hinzuzufügen, als alles unter einem Dach in index.html war, aber jetzt habe ich es nicht in eine eigene separate Datei verschoben. Ich habe den Punkt, in der Lage zu sein, entweder die Links funktionieren zu lassen oder "aktiv" hinzuzufügen, was unten gezeigt wird.
menu.html:
$(document).ready(function() {
$(function() {
$('.side a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side">
<a href="/intro.html">Intro</a>
<a href="/contact.html">Contact</a>
<a href="/about.html">About</a>
</div>Ich würde erwarten, dass das Obige mein Menü anzeigt, den aktiven Link anzeigt und dann die Links den Benutzer zu jeder anderen Seite führen. Das Menü wird angezeigt, es zeigt den aktiven Link an, aber die Links funktionieren jetzt nicht.
Sie können eine URL-Variable deklarieren, um zu sehen, welche die aktuelle Seite ist, und dann die aktive Klasse hinzufügen:
<script>
// This line will give you the active page without parameters
var url = window.location.href.split('/')[window.location.href.split('/').length-1].split('?')[0];
$('a[href$="'+url+'"]').addClass('active');
</script>
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen