So machen Sie Navigationslinks mit Bootstrap aktiv: Eine Schritt-für-Schritt-Anleitung

Navigationslinks in Bootstrap aktivieren

Beim Replizieren der aktiven Navigationsfunktion auf der Bootstrap-Website können Benutzer auf Schwierigkeiten beim Aktivieren von Menüelementen stoßen. Um dieses Problem zu beheben, stellen Sie sicher, dass das erforderliche CSS und JavaScript korrekt implementiert sind.

HTML

Die HTML-Struktur sollte eine ungeordnete Liste enthalten (

) mit Listenelementen (
• ), die jeweils ein Ankertag () enthalten. Das Ankertag definiert den Navigationslink und kann optional ein aria-current="page"-Attribut für das aktuell aktive Element enthalten.

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

  CSS

  Das CSS definiert Stile für das Navigationsmenü. Stellen Sie sicher, dass die aktive Klasse ordnungsgemäß auf das aktuell aktive Element angewendet wird.

  <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

  Um Navigationslinks zu aktivieren und die aktive Klasse umzuschalten, implementieren Sie jQuery Ereignishandler:

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

  Das obige ist der detaillierte Inhalt vonSo machen Sie Navigationslinks mit Bootstrap aktiv: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!