Bagaimanakah Saya Boleh Menyerlahkan Pautan Halaman Semasa dalam Menu Navigasi Menggunakan CSS dan jQuery?

Cara Menukar Warna Pautan untuk Halaman Semasa Menggunakan CSS dan jQuery

Masalah:

Bagaimana saya boleh menukar teks dan warna latar belakang pautan untuk menyerlahkan halaman semasa dalam navigasi menu?

Penyelesaian CSS:

Untuk penggayaan asas, CSS menyediakan pemilih li a untuk menyasarkan semua pautan di dalam item senarai:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

Walau bagaimanapun, pendekatan ini tidak membezakan pautan halaman semasa.

jQuery Penyelesaian:

Untuk menyerlahkan pautan halaman semasa secara dinamik, fungsi .setiap jQuery boleh digunakan:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Kod ini berulang melalui semua pautan, menyemak sama ada hrefnya sepadan dengan semasa URL halaman dan menambah kelas "aktif" untuk dipadankan dengan yang dipratentukan gaya.

Pertimbangan:

• Kecilkan pemilihan pautan menggunakan pemilih CSS seperti $("nav [href]").
• Kendalikan parameter URL dengan menanggalkannya dengan this.href.split("?")[0].
• Pendekatan ini membolehkan anda untuk mengelakkan perubahan manual pada setiap halaman dan mengekalkan konsistensi dalam penggayaan pautan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyerlahkan Pautan Halaman Semasa dalam Menu Navigasi Menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!