Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menggayakan Pautan Halaman Semasa Secara Berbeza dengan CSS?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-14 04:25:11652semak imbas

How Can I Style Current Page Links Differently with 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn