首頁  >  文章  >  web前端  >  如何使用自訂 CSS 和 JavaScript 在 Bootstrap 選單中實作主動導覽?

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

Barbara Streisand
Barbara Streisand原創
2024-11-01 05:42:02839瀏覽

How to Achieve Active Navigation in Bootstrap Menus with Custom CSS and JavaScript?

使用 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn