ブートストラップを使用してナビゲーション リンクをアクティブにする方法: ステップバイステップ ガイド

Bootstrap でのナビゲーション リンクのアクティブ化

Bootstrap Web サイトに表示されるアクティブなナビゲーション機能を複製する場合、ユーザーはメニュー項目をアクティブ化する際に問題が発生する可能性があります。この問題に対処するには、必要な CSS と JavaScript が正しく実装されていることを確認してください。

HTML

HTML 構造には順序なしリスト (

) とリスト項目 (
• )、それぞれにアンカー タグ () が含まれています。アンカー タグはナビゲーション リンクを定義し、オプションで現在アクティブな項目の aria-current="page" 属性を含めることができます。

  <code class="html"><ul class="menu">
      <li><a href="#">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

  ナビゲーション リンクをアクティブにしてアクティブ クラスを切り替えるには、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>

  以上がブートストラップを使用してナビゲーション リンクをアクティブにする方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。