カスタム CSS と 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

メニューの 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 が必要です。次のスニペットは、メニュー項目のクリックを処理し、一度に 1 つの項目だけがアクティブになるようにします。

<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>

追加の考慮事項

この特定のケースでは、ブートストラップJavaScript では .navbar で表されるナビゲーションがターゲットになっています。ただし、このソリューションを適応させるときは、実装の詳細を考慮することが常に重要です。

提供された HTML、CSS、JavaScript を利用することで、必要なアクティブ クラス機能を備えたカスタマイズされたナビゲーション メニューを実現できます。

以上がカスタム CSS と JavaScript を使用してブートストラップ メニューでアクティブなナビゲーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。