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