Cara Menjadikan Pautan Navigasi Aktif Menggunakan Bootstrap: Panduan Langkah demi Langkah

Mengaktifkan Pautan Navigasi dalam Bootstrap

Apabila mereplikasi ciri navigasi aktif yang dilihat pada tapak web Bootstrap, pengguna mungkin menghadapi kesukaran untuk mengaktifkan item menu. Untuk menangani isu ini, pastikan CSS dan JavaScript yang diperlukan dilaksanakan dengan betul.

HTML

Struktur HTML hendaklah mengandungi senarai tidak tertib (

) dengan item senarai (
• ), setiap satu mengandungi teg sauh (). Tag anchor mentakrifkan pautan navigasi dan boleh menyertakan atribut aria-current="page" untuk item aktif semasa.

  <code class="html"><ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="#contact">Contact</a></li>
  </ul></code>

  CSS

  CSS mentakrifkan gaya untuk menu navigasi. Pastikan kelas aktif digunakan dengan betul pada item aktif semasa.

  <code class="css">.menu {
    list-style: none;
  }
  
  .menu > li {
    float: left;
  }
  
  .menu > li > a {
    color: #555;
    float: none;
    padding: 10px 16px 11px;
    display: block;
  }
  
  .menu > li > a:hover {
    color: #F95700;
  }
  
  .menu a[aria-current="page"],
  .menu a[aria-current="page"]:hover {
    color: #F95700;
  }</code>

  JavaScript

  Untuk mengaktifkan pautan navigasi dan togol kelas aktif, laksanakan jQuery pengendali acara:

  <code class="javascript">$('.navbar li').click(function(e) {
      $('.navbar li.active').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
          $this.addClass('active');
      }
      e.preventDefault();
  });</code>

  Atas ialah kandungan terperinci Cara Menjadikan Pautan Navigasi Aktif Menggunakan Bootstrap: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!