Bagaimanakah Saya Boleh Menggayakan Pautan Halaman Semasa Secara Berbeza Menggunakan CSS dan jQuery?

Menggayakan Pautan Halaman Semasa Secara Berbeza dengan CSS

Apabila menavigasi melalui tapak web, membezakan secara visual halaman semasa daripada yang lain meningkatkan pengalaman pengguna. Artikel ini meneroka penyelesaian CSS untuk menukar warna pautan untuk halaman yang sedang aktif.

Pertimbangkan struktur HTML berikut:

<ul>

Untuk bermula, kami akan menggunakan CSS untuk menggayakan semua pautan :

li a {
  color: #A60500;
}

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

Sekarang, mari kita atasi CSS untuk pautan halaman semasa. Menggunakan jQuery, kami boleh melelakan melalui semua pautan dan menyemak sama ada atribut href mereka sepadan dengan URL halaman semasa:

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

Dengan tambahan itu, pautan yang menghala ke halaman semasa akan menerima kelas "aktif". Kami kemudiannya boleh mempertingkatkan CSS untuk menukar warna pautan untuk elemen dengan kelas itu:

.active {
  color: #FFEE00;
}

Walau bagaimanapun, adalah penting untuk mengambil perhatian pertimbangan berikut:

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