Wie behalte ich den aktiven Navigationsstatus in Bootstrap-CSS ohne Standardhintergrundfarben bei?

Bootstrap CSS: Aufrechterhaltung der aktiven Navigation

Bootstrap bietet ein Navigationssystem, mit dem Benutzer problemlos durch verschiedene Abschnitte einer Website navigieren können. Manchmal ist es jedoch wünschenswert, das Menü ohne die Standardhintergrundfarben anzupassen. In solchen Fällen kann es erforderlich sein, zusätzliche Logik zu implementieren, um den aktiven Navigationsstatus beim Scrollen oder Klicken auf Menüelemente beizubehalten.

Stellen Sie sich das folgende Szenario vor: Ein benutzerdefiniertes Menü wurde mit HTML und CSS erstellt, ähnlich wie das Subnav-Menü auf der Bootstrap-Website. Allerdings wechselt die aktive Klasse nicht, wenn Sie nach unten scrollen oder auf die Menüpunkte klicken.

HTML:

<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>

CSS:

<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>

Um dieses Problem zu beheben, ist zusätzliches JavaScript erforderlich. Der folgende jQuery-Code löscht die aktive Klasse aus allen Menüelementen, bevor er sie dem aktuellen Element hinzufügt:

JavaScript:

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

Durch die Einbindung dieses Codes wird die aktive Die Klasse wechselt jetzt korrekt, wenn durch das Menü navigiert wird. Diese Lösung ermöglicht ein individuelles Navigationssystem, das das gewünschte visuelle Verhalten beibehält.

Das obige ist der detaillierte Inhalt vonWie behalte ich den aktiven Navigationsstatus in Bootstrap-CSS ohne Standardhintergrundfarben bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!