Bagaimanakah Saya Boleh Menggayakan Pautan Halaman Semasa Secara Berbeza dengan CSS?

Menyesuaikan Gaya Pautan untuk Halaman Semasa Menggunakan CSS

Selalunya, pembangun web ingin membezakan rupa pautan pada halaman semasa daripada yang lain . Satu pendekatan biasa ialah menukar teks dan warna latar belakang.

Untuk mencapai kesan ini dengan CSS, pertimbangkan pendekatan berikut:

li a {
  color: #A60500;
}

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

Kod ini memastikan semua pautan pada halaman web mempunyai warna teks merah (#A60500). Apabila pengguna menuding pada pautan, warna teksnya bertukar kepada hitam (#640200) dan latar belakang menjadi hitam (#000000).

Dalam HTML, buat menu navigasi dengan berbilang pautan:

<ul>

Sebagai alternatif, anda boleh menggunakan jQuery untuk menambahkan kelas secara dinamik pada halaman semasa pautan:

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

Skrip ini berulang melalui semua pautan pada halaman dan menambahkan kelas aktif pada kelas yang sepadan dengan URL semasa. CSS kemudiannya boleh digunakan untuk menggayakan pautan aktif secara berbeza, membolehkan anda menyesuaikan penampilan pautan halaman semasa.

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