この記事に適合する質問ベースのタイトルをいくつか示します。 **短い

Bootstrap のアクティブ ナビゲーション クラスに関する課題を克服する

Bootstrap でナビゲーション メニューをカスタマイズする場合、スクロールまたはメニュー項目をクリックするとアクティブ クラスが切り替わらないという問題が発生する場合があります。 。これは、適切な JavaScript サポートのない CSS の変更が原因である可能性があります。

CSS の拡張

提供される HTML と CSS は、Bootstrap のデフォルトのメニュー構造とスタイルに似ています。サブナビゲーションの動作を複製するには、追加の変更が必要です。

jQuery の実装

DOM を操作し、ナビゲーション リンクのアクティブ状態を制御するには、jQuery を統合する必要があります。次のコードはこの目的を果たします:

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

関数の内訳

• このコードは、クラス「navbar.」の要素内のすべてのリスト項目 (li) を選択します。
• リスト項目をクリックすると、以前にアクティブだった項目からアクティブなクラスが削除されます。
• 現在のリスト項目の状態が評価され、まだアクティブでない場合は、アクティブなクラスを受け取ります。
• e.preventDefault(); の使用クリックされたリンクのターゲットまでページがスクロールしないようにします。

以上がこの記事に適合する質問ベースのタイトルをいくつか示します。 **短いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。