Bagaimana untuk Menukar Warna Pautan Halaman Semasa dengan CSS dan jQuery?

Menukar Warna Pautan Halaman Semasa dengan CSS

Memanipulasi penampilan pautan halaman semasa ialah keperluan penggayaan CSS yang biasa. Untuk membezakannya daripada pautan halaman lain, pengguna sering memilih untuk menukar warna teks dan latar belakang. Berikut ialah penyelesaian komprehensif untuk permintaan penggayaan anda:

Penggayaan CSS

Untuk menggayakan pautan halaman semasa, tambahkan peraturan CSS berikut pada helaian gaya anda:

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

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

Skrip jQuery

Skrip jQuery yang disediakan membolehkan anda mengenal pasti pautan halaman semasa dan menambahkan kelas secara dinamik padanya:

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

Bergantung pada struktur halaman khusus anda, anda mungkin perlu memperhalusi pemilih untuk pautan ($("[href]")). Contohnya, jika pautan terkandung dalam elemen navigasi, anda boleh mengecilkan pilihan kepada $("nav [href]").

Jika halaman anda menggunakan parameter URL, anda boleh mengalih keluarnya sebelum membandingkan pautan untuk memastikan pautan halaman semasa diiktiraf:

<code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

Pendekatan ini menghapuskan keperluan untuk mengubah suai penggayaan CSS untuk setiap halaman secara individu.

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