如何在沒有預設背景顏色的情況下在 Bootstrap CSS 中保持活動導航狀態？

Bootstrap CSS：維護活動導航

Bootstrap 提供了一個導航系統，讓使用者可以輕鬆瀏覽網站的不同部分。然而，有時需要自訂沒有預設背景顏色的選單。在這種情況下，可能需要實作額外的邏輯來在捲動或點擊選單項目時維持活動導航狀態。

考慮以下場景：使用 HTML 和 CSS 建立了自訂選單，類似於Bootstrap 網站上的子導覽選單。但是，向下捲動或按一下選單項目時，活動類別不會切換。

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>

要解決此問題，需要額外的。以下jQuery 程式碼會在將活動類別新增至目前專案之前從所有選單項目中清除活動類別：

JavaScript:

<code class="js">$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});</code>

透過合併此程式碼，活動現在，在選單中導航時，類別將正確切換。該解決方案允許定制導航系統，以保持所需的視覺行為。

以上是如何在沒有預設背景顏色的情況下在 Bootstrap CSS 中保持活動導航狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！