Bagaimana untuk Mencapai Navigasi Aktif dalam Menu Bootstrap dengan CSS dan JavaScript Tersuai?

Mencapai Navigasi Aktif dengan Bootstrap CSS

Mencipta menu navigasi tersuai dalam Bootstrap sambil mengekalkan kefungsian kelas aktif boleh menjadi satu cabaran. Artikel ini menangani isu mengapa kelas aktif tidak bertukar apabila menatal atau mengklik pada item menu.

Struktur HTML

HTML yang disediakan pada asasnya terdiri daripada senarai item dengan sauh yang sepadan:

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

Gaya CSS untuk menu mentakrifkan sifat asas seperti penggayaan senarai, apungan dan pelapik. Selain itu, keadaan tuding dan keadaan aktif ditentukan:

<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 untuk Keadaan Aktif

Untuk menukar kelas aktif dengan betul, JavaScript diperlukan. Coretan berikut mengendalikan klik pada item menu dan memastikan bahawa hanya satu item aktif pada satu masa:

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

Pertimbangan Tambahan

Dalam kes khusus ini, Bootstrap navigasi, diwakili oleh .navbar dalam JavaScript, sedang disasarkan. Walau bagaimanapun, adalah sentiasa penting untuk mempertimbangkan spesifik pelaksanaan anda apabila menyesuaikan penyelesaian ini.

Dengan menggunakan HTML, CSS dan JavaScript yang disediakan, anda boleh mencapai menu navigasi tersuai dengan kefungsian kelas aktif yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Navigasi Aktif dalam Menu Bootstrap dengan CSS dan JavaScript Tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!