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

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

Linda Hamilton
Lepaskan: 2024-12-15 17:59:10
asal
642 orang telah melayarinya

How Can I Style the Current Page Link Differently Using CSS and jQuery?

Menggayakan Pautan Halaman Semasa Secara Berbeza dengan CSS

Apabila menavigasi melalui tapak web, membezakan secara visual halaman semasa daripada yang lain meningkatkan pengalaman pengguna. Artikel ini meneroka penyelesaian CSS untuk menukar warna pautan untuk halaman yang sedang aktif.

Pertimbangkan struktur HTML berikut:

<ul>
Salin selepas log masuk

Untuk bermula, kami akan menggunakan CSS untuk menggayakan semua pautan :

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}
Salin selepas log masuk

Sekarang, mari kita atasi CSS untuk pautan halaman semasa. Menggunakan jQuery, kami boleh melelakan melalui semua pautan dan menyemak sama ada atribut href mereka sepadan dengan URL halaman semasa:

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

Dengan tambahan itu, pautan yang menghala ke halaman semasa akan menerima kelas "aktif". Kami kemudiannya boleh mempertingkatkan CSS untuk menukar warna pautan untuk elemen dengan kelas itu:

.active {
  color: #FFEE00;
}
Salin selepas log masuk

Walau bagaimanapun, adalah penting untuk mengambil perhatian pertimbangan berikut:

<ul>
  • Bergantung pada struktur halaman , mengecilkan pemilihan pautan mungkin diperlukan.
  • Jika parameter URL digunakan, menanggalkannya mungkin diperlukan untuk memastikan tepat sepadan.
  • 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!

    sumber:php.cn
    Kenyataan Laman Web ini
    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
    Artikel terbaru oleh pengarang
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan