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>

     Salin selepas log masuk

   • Tentukan penggayaan untuk pautan aktif:

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

     Salin selepas log masuk

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>

     Salin selepas log masuk

   • Secara pilihan, kecilkan pilihan pautan:

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

     Salin selepas log masuk

   • Kendalikan parameter URL jika perlu:

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

     Salin selepas log masuk

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!