修改 Bootstrap 主動導航
Bootstrap 的網站擁有子導航,可以輕鬆匹配部分並根據用戶輸入更改背景顏色。本文旨在引導您在不更改背景的情況下建立簡化功能表的步驟,重點是解決滾動或點擊時啟動類別的問題。
CSS 自訂:
提供的 HTML 程式碼看起來是標準的,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; }
要實作活動類別切換功能,需要 JavaScript。提供的答案利用 jQuery 來實現所需的效果:
$('.navbar li').click(function(e) { $('.navbar li.active').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); });
此程式碼確保單擊選單項目時,所有活動類別都將被刪除,並且當前項目獲得活動狀態。這與 Bootstrap 子導航中觀察到的行為一致。
要實現此功能,請確保 jQuery、bootstrap.js 和 bootstrap.css 檔案的正確連結。
以上是以下是一些標題選項,請記住問題格式並專注於文章的核心內容: **選項 1(直接且清晰):** * **如何建立簡化的活動導覽選單的詳細內容。更多資訊請關注PHP中文網其他相關文章!