Bagaimana untuk Mengubah Warna Pautan Halaman Semasa Menggunakan CSS dan jQuery?

Cara Menukar Warna Pautan Halaman Semasa dengan CSS dan jQuery

Menggayakan pautan untuk halaman semasa secara berbeza daripada yang lain adalah perkara biasa tugas dalam pembangunan web. Satu cara untuk mencapai ini ialah dengan menggunakan CSS dan jQuery.

Menggunakan CSS

Untuk menggayakan pautan pada halaman semasa, anda boleh menggunakan CSS berikut:

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

Kod ini akan menukar warna semua pautan pada halaman kepada #A60500. Apabila pautan dilayangkan, warnanya akan bertukar kepada #640200 dan warna latar belakangnya akan bertukar kepada #000000.

Menggunakan jQuery

Anda juga boleh menggunakan jQuery untuk menukar warna pautan halaman semasa. Untuk melakukan ini, anda boleh menggunakan kod berikut:

<code class="javascript">$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});</code>

Kod ini akan melingkar melalui semua pautan pada halaman dan menambah kelas "aktif" pada pautan yang sepadan dengan URL halaman semasa. Anda kemudiannya boleh menggunakan CSS untuk menggayakan kelas "aktif" secara berbeza, seperti menukar warnanya.

Nota: Kod jQuery mungkin perlu diubah suai bergantung pada struktur halaman anda dan pautan yang digunakan. Anda mungkin perlu mengecilkan pemilihan pautan atau membuang parameter URL untuk memastikan pautan yang betul digayakan.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Warna Pautan Halaman Semasa Menggunakan CSS dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!