Bagaimana untuk Mengekalkan Keadaan Navigasi Aktif dalam Bootstrap CSS Tanpa Warna Latar Belakang Lalai?

CSS Bootstrap: Mengekalkan Navigasi Aktif

Bootstrap menyediakan sistem navigasi yang membolehkan pengguna menavigasi dengan mudah melalui bahagian tapak web yang berbeza. Walau bagaimanapun, kadangkala ia dikehendaki untuk menyesuaikan menu tanpa warna latar belakang lalai. Dalam kes sedemikian, mungkin perlu untuk melaksanakan logik tambahan untuk mengekalkan keadaan navigasi aktif apabila menatal atau mengklik pada item menu.

Pertimbangkan senario berikut: menu tersuai telah dibuat menggunakan HTML dan CSS, serupa dengan menu subnav pada tapak web Bootstrap. Walau bagaimanapun, kelas aktif tidak bertukar apabila menatal ke bawah atau mengklik pada item menu.

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>

Untuk menyelesaikan isu ini, JavaScript tambahan diperlukan. Kod jQuery berikut mengosongkan kelas aktif daripada semua item menu sebelum menambahkannya pada item semasa:

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>

Dengan memasukkan kod ini, kod aktif kelas kini akan bertukar dengan betul apabila menavigasi melalui menu. Penyelesaian ini membolehkan sistem navigasi tersuai yang mengekalkan tingkah laku visual yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Keadaan Navigasi Aktif dalam Bootstrap CSS Tanpa Warna Latar Belakang Lalai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!