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

Penggayaan Pautan CSS untuk Halaman Semasa

Dalam bidang reka bentuk web, penggayaan pautan selalunya boleh menjadi aspek penting untuk meningkatkan pengalaman pengguna dan estetika laman web. Jika anda ingin membezakan rupa pautan untuk halaman semasa daripada yang lain, CSS menawarkan penyelesaian yang mudah.

Pelaksanaan dengan CSS

Menambah peraturan CSS berikut akan membenarkan anda untuk menukar teks dan warna latar belakang untuk pautan pada semasa halaman:

li a {
  color: #A60500;
}

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

Contoh

Pertimbangkan struktur HTML berikut:

<ul>

Dengan peraturan CSS digunakan, pautan untuk semasa halaman (cth., "/programming.php") akan menukar warna teks dan latar belakang apabila halaman dimuatkan atau pengguna menuding ke atas ia.

Penggayaan Dinamik dengan jQuery

Jika anda lebih suka pendekatan yang lebih dinamik, jQuery menyediakan kod berikut untuk mencapai hasil yang serupa:

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

Kod ini berulang melalui semua pautan pada halaman dan menambah kelas "aktif" pada pautan yang sepadan dengan URL semasa. Anda kemudiannya boleh menggunakan CSS untuk menggayakan kelas "aktif" seperti yang dikehendaki.

Dengan memanfaatkan teknik ini, anda boleh menukar rupa pautan untuk halaman semasa dengan mudah, meningkatkan daya tarikan visual dan pengalaman pengguna tapak web anda. .

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!