デフォルトの背景色を使用せずにブートストラップ CSS でアクティブなナビゲーション状態を維持するにはどうすればよいですか?

Bootstrap CSS: アクティブ ナビゲーションの維持

Bootstrap は、ユーザーが Web サイトのさまざまなセクションを簡単に移動できるようにするナビゲーション システムを提供します。ただし、デフォルトの背景色を使用せずにメニューをカスタマイズしたい場合があります。このような場合、メニュー項目をスクロールまたはクリックするときにアクティブなナビゲーション状態を維持するために追加のロジックを実装する必要がある場合があります。

次のシナリオを考えてみましょう。カスタム メニューが、HTML と CSS を使用して作成されています。 Bootstrap Web サイトのサブナビゲーション メニュー。ただし、下にスクロールしたり、メニュー項目をクリックしても、アクティブなクラスは切り替わりません。

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 が必要です。次の 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>

このコードを組み込むことにより、アクティブなクラスがメニュー内を移動するときにクラスが正しく切り替わるようになりました。このソリューションにより、望ましい視覚的な動作を維持するカスタマイズされたナビゲーション システムが可能になります。

以上がデフォルトの背景色を使用せずにブートストラップ CSS でアクティブなナビゲーション状態を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。