如何使用 Bootstrap 啟動導航連結：逐步指南

啟動 Bootstrap 中的導覽連結

複製 Bootstrap 網站上的活動導覽功能時，使用者可能會在啟動選單項目時遇到困難。要解決此問題，請確保正確實現必要的 CSS 和 JavaScript。

HTML

HTML 結構應包含無序列表(

) ) 和列表項(
• )，每個列表項包含一個錨標記()。錨標記定義導航鏈接，並且可以選擇包含當前活動項目的 aria-current="page" 屬性。

  <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 定義導覽選單的樣式。確保活動類別正確應用於目前活動項目。

  <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

  要啟動導航連結並切換活動類，請實作 jQuery事件處理程序：

  <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>

以上是如何使用 Bootstrap 啟動導航連結：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！