Bagaimana untuk Menyerlahkan Pautan Halaman Semasa dengan CSS dan jQuery?

Membezakan Pautan Halaman Semasa dengan CSS

Dalam bidang reka bentuk web, selalunya wajar untuk menyerlahkan pautan yang sepadan dengan halaman semasa secara berbeza daripada yang lain. Ini boleh meningkatkan keterlihatan navigasi dan memberikan petunjuk yang jelas tentang lokasi halaman.

Pertimbangkan contoh berikut:

<code class="html"><ul id="navigation">
  <li class="a"><a href="/">Home</a></li>
  <li class="b"><a href="theatre.php">Theatre</a></li>
  <li class="c"><a href="programming.php">Programming</a></li>
</ul></code>

Untuk mencapai kesan yang diingini menggunakan CSS, kami boleh menyasarkan bekas:

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

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

Kod ini menggunakan warna yang berbeza dan kesan tuding pada semua pautan pada halaman. Walau bagaimanapun, untuk menyerlahkan pautan halaman semasa, kami boleh menggunakan jQuery:

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

Skrip ini berulang melalui semua pautan dengan atribut href dan menyemak sama ada URL pautan sepadan dengan URL halaman semasa. Jika ya, ia menambah kelas "aktif" pada pautan, yang boleh digayakan seperti yang dikehendaki.

CSS berikut boleh digunakan untuk menggayakan pautan aktif:

<code class="css">.active {
  color: #FFFFFF;
  background-color: #000000;
}</code>

Dengan menggabungkan CSS dan jQuery, anda boleh mencipta perbezaan visual dengan mudah untuk pautan halaman semasa, meningkatkan pengalaman pengguna dan navigasi tapak.

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