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

Serlahkan Pautan Halaman Semasa dengan CSS

Soalan:

Bagaimana saya boleh mengubah gaya pautan pada halaman semasa untuk membezakannya daripada yang lain? Secara khususnya, saya ingin menukar teks dan warna latar belakang.

Penyelesaian CSS:

li a {
  color: #A60500;
}

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

Contoh:

<ul>

Penyelesaian JavaScript:

Untuk menggunakan secara automatik penggayaan aktif, anda boleh menggunakan fungsi .each jQuery:

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

Pertimbangan:

<ul>

Untuk pemilihan pautan yang lebih tepat, pertimbangkan untuk menggunakan atribut kelas seperti " nav [href]".

Jika URL anda termasuk parameter pertanyaan, pertimbangkan untuk menanggalkannya menggunakan:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

Pendekatan ini menghapuskan keperluan untuk mengubah suai setiap halaman secara manual dan memastikan penggayaan yang konsisten merentas URL halaman yang berbeza.

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