Bootstrapナビゲーションメニューをクリックしたら自動的にactiveを追加できません。

2075 ワード

Bootstrapは豊富な前後のフレームを提供しています。CSSに精通していないプログラムのために猿たちに便利を提供しています。先日Bootstrapのメニューコントロールを使った時、その中のリンクがクリックした後、自動的にactiveクラスを追加できなくなりました。自動的にアクティブにできません。適切に次のように処理してこそOKです。
無駄話をして直接コードを入れます。

<ul class="tabbable faq-tabbable">
  <li class="active"><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyContract", new { area = "MyData" })">    </a></li>
  <li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyCashout", new { area = "MyData" })">    </a></li>
  <li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyReceive", new { area = "MyData" })">    </a></li>
  <li><a href="@Url.Action(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyCashback", new { area = "MyData" })">    </a></li>
</ul>
これは典型的なナビゲーションメニューで、以下のスクリプト処理を追加します。

  $(function () {
    $(".faq-tabbable").find("li").each(function () {
      var a = $(this).find("a:first")[0];
      if ($(a).attr("href") === location.pathname) {
        $(this).addClass("active");
      } else {
        $(this).removeClass("active");
      }
    });
  })
原理はとても簡単で、すべてのliラベルを見つけて、そのaラベルのリンク先を判断して、どのように現在のブラウザの住所と一致して、現在アクティブにすべきメニューだと思って、active種類を追加して、さもなくばキャンセルします。
これでいいです
以上のこのBootstrapナビゲーションメニューをクリックしてから自動的にactiveを追加できない処理方法は、小編集が皆さんに提供した内容の全部を共有しています。