如何使用自訂 CSS 和 JavaScript 在 Bootstrap 選單中實作主動導覽？

使用 Bootstrap CSS 實作主動導覽

在 Bootstrap 中建立自訂導覽選單，同時維護活動類功能可能是一個挑戰。本文解決了滾動或點擊選單項目時活動類別不切換的問題。

HTML 結構

提供的HTML 本質上包含一個項目列表具有對應的錨點：

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

自訂>自訂

選單的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

要正確切換活動類，需要 JavaScript。以下程式碼片段處理選單項目上的點擊，並確保一次只有一個項目處於活動狀態：

<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 JavaScript 中以.navbar 表示的導航正在成為攻擊目標。但是，在調整此解決方案時，考慮實施的具體細節始終很重要。

透過利用提供的 HTML、CSS 和 JavaScript，您可以實現具有所需活動類別功能的自訂導覽功能表。

以上是如何使用自訂 CSS 和 JavaScript 在 Bootstrap 選單中實作主動導覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！