Berikut ialah beberapa pilihan tajuk, dengan mengingati format soalan dan memfokuskan pada kandungan teras artikel: **Pilihan 1 (Terus dan jelas):** * **Cara Membuat Menu Navigasi Aktif Ringkas

Mengubah suai Navigasi Aktif Bootstrap

Tapak web Bootstrap mempunyai subnav yang memadankan bahagian dengan mudah dan mengubah warna latar belakang berdasarkan input pengguna. Artikel ini bertujuan untuk membimbing anda melalui langkah-langkah mencipta menu ringkas tanpa perubahan latar belakang, memfokuskan pada menangani isu dengan mengaktifkan kelas semasa menatal atau mengklik.

Penyesuaian CSS:

Kod HTML yang disediakan nampaknya standard, dan semakan CSS yang dibuat adalah seperti berikut:

.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;
}

Untuk melaksanakan fungsi penukaran kelas aktif, JavaScript diperlukan. Jawapan yang diberikan memanfaatkan jQuery untuk mencapai kesan yang diingini:

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

Kod ini memastikan bahawa apabila mengklik item menu, semua kelas aktif dialih keluar dan item semasa mendapat status aktif. Ini sejajar dengan gelagat yang diperhatikan dalam subnav Bootstrap.

Untuk melaksanakan fungsi ini, pastikan pemautan yang betul bagi fail jQuery, bootstrap.js dan bootstrap.css.

Atas ialah kandungan terperinci Berikut ialah beberapa pilihan tajuk, dengan mengingati format soalan dan memfokuskan pada kandungan teras artikel: **Pilihan 1 (Terus dan jelas):** * **Cara Membuat Menu Navigasi Aktif Ringkas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!