Wie erreicht man eine aktive Navigation in Bootstrap-Menüs mit benutzerdefiniertem CSS und JavaScript?

Aktive Navigation mit Bootstrap-CSS erreichen

Benutzerdefinierte Navigationsmenüs in Bootstrap zu erstellen und gleichzeitig die Funktionalität der aktiven Klasse beizubehalten, kann eine Herausforderung sein. In diesem Artikel geht es um die Frage, warum die aktive Klasse beim Scrollen oder Klicken auf Menüelemente nicht wechselt.

HTML-Struktur

Der bereitgestellte HTML-Code besteht im Wesentlichen aus einer Liste von Elementen mit entsprechenden Ankern:

<code class="html"><ul class="menu">
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul></code>

Benutzerdefiniertes CSS

Die CSS-Stile für das Menü definieren grundlegende Eigenschaften wie Listenstil, Float und Padding. Zusätzlich werden Hover-Zustände und aktive Zustände angegeben:

<code class="css">.menu {
  list-style: none;
}

.menu > li {
  float: left;
}

.menu > li > a {
  color: #555;
  float: none;
  padding: 10px 16px 11px;
  display: block;
}

.menu > li > a:hover {
  color: #F95700;
}

.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
  color: #F95700;
}</code>

JavaScript für den aktiven Zustand

Um die aktive Klasse korrekt umzuschalten, ist JavaScript erforderlich. Das folgende Snippet verarbeitet Klicks auf Menüelemente und stellt sicher, dass jeweils nur ein Element aktiv ist:

<code class="javascript">$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});</code>

Zusätzliche Überlegungen

In diesem speziellen Fall der Bootstrap Die Navigation, dargestellt durch .navbar im JavaScript, wird gezielt angegriffen. Es ist jedoch immer wichtig, bei der Anpassung dieser Lösung die Besonderheiten Ihrer Implementierung zu berücksichtigen.

Durch die Verwendung des bereitgestellten HTML, CSS und JavaScript können Sie ein individuelles Navigationsmenü mit der gewünschten aktiven Klassenfunktionalität erreichen.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine aktive Navigation in Bootstrap-Menüs mit benutzerdefiniertem CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!