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-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-10-25 13:03:02

asal

479 orang telah melayarinya

Here are a few title options, keeping in mind the question format and focusing on the article's core content:

**Option 1 (Direct and clear):**

* **How to Create a Simplified Active Navigation Menu in Bootstrap?**

**Option 2 (Emphasizing the problem):*

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

Salin selepas log masuk

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();
});

Salin selepas log masuk

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!