Bagaimana untuk Mengubah Warna Pautan Secara Dinamik untuk Halaman Semasa?

Menukar Warna Pautan untuk Halaman Semasa

Mengubah suai rupa pautan untuk halaman yang sedang dilihat boleh meningkatkan pengalaman pengguna dengan menyediakan isyarat visual. Satu teknik biasa ialah menukar warna teks dan latar belakang untuk menyerlahkan pautan semasa.

Untuk mencapai kesan ini, CSS dan JavaScript boleh digunakan. CSS mentakrifkan rupa pautan yang diingini, manakala JavaScript mengenal pasti halaman semasa secara dinamik dan menggunakan penggayaan sewajarnya.

Begini cara untuk melaksanakan penyelesaian ini:

1. Penggayaan CSS:

   • Tentukan penggayaan asas untuk semua pautan:

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

   • Tentukan penggayaan untuk pautan aktif:

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

2. JavaScript:

   • Gunakan fungsi .each untuk berulang melalui pautan:

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

   • Secara pilihan, kecilkan pilihan pautan:

     <code class="javascript">$("nav [href]").each ...</code>

   • Kendalikan parameter URL jika perlu:

     <code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

Dengan melaksanakan penyelesaian ini, pautan halaman semasa akan berbeza secara visual daripada yang lain, memberikan petunjuk yang jelas kepada pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Warna Pautan Secara Dinamik untuk Halaman Semasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!