質問の形式を念頭に置き、記事の核心的な内容に焦点を当てた、いくつかのタイトルのオプションを次に示します。 **オプション 1 (直接およびクリア):** * **簡素化されたアクティブ ナビゲーション メニューを作成する方法

Bootstrap アクティブ ナビゲーションの変更

Bootstrap の Web サイトには、セクションを簡単に照合し、ユーザー入力に基づいて背景色を変更するサブナビゲーションが備わっています。この記事は、背景を変更せずに簡素化されたメニューを作成する手順を案内することを目的としており、スクロールまたはクリック時のクラスのアクティブ化に関する問題の解決に重点を置いています。

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 中国語 Web サイトの他の関連記事を参照してください。