Bagaimana untuk Menggayakan Pautan Halaman Semasa dalam CSS?

Menggayakan Pautan Halaman Semasa dalam CSS: Panduan Komprehensif

Selalunya, pereka bentuk berusaha untuk meningkatkan pengalaman pengguna dengan membezakan pautan halaman semasa daripada yang lain, menonjolkan status aktifnya. Satu pendekatan yang berkesan untuk mencapai matlamat ini adalah melalui CSS, menawarkan fleksibiliti dan penyesuaian yang mudah.

Untuk mengubah penampilan pautan halaman semasa, CSS menyediakan penyelesaian yang mudah tetapi berkuasa:

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

Dengan kod ini, pautan yang sedang aktif akan dipaparkan dengan warna teks coklat kemerahan dengan latar belakang hitam. Pembezaan visual ini membantu pengguna menavigasi tapak dengan lebih intuitif.

Untuk pengubahsuaian yang lebih maju, jQuery menawarkan kawalan yang lebih hebat. Dengan memanfaatkan fungsi .setiap, anda boleh lelaran melalui semua pautan dan menggunakan kelas aktif secara dinamik pada pautan yang sepadan dengan URL halaman semasa:

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

Kod ini memastikan bahawa kelas aktif hanya ditambahkan pada pautan yang sepadan dengan halaman semasa, tanpa mengira struktur halaman atau URL khusus yang digunakan.

Untuk memperhalusi lagi pemilihan pautan, pertimbangkan untuk menggunakan pemilih yang lebih khusus, seperti $("nav [href]") jika anda pautan terletak dalam elemen navigasi. Selain itu, jika URL anda mengandungi parameter, anda mungkin perlu menanggalkannya sebelum membandingkan URL untuk mengambil kira variasi ini.

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