2

Bootstrap を使用してナビゲーション メニューを作成しています。nav は jQuery load() を使用して asdf2.html ページにロードされます。ユーザーが asdf2.html に移動するときに、「アクティブ」クラスをサブリンクに追加するのが困難です。

ユーザーが asdf2.html をロードするときに、アクティブなクラスをサブリンクに追加するにはどうすればよいですか? div が問題を引き起こしていると思いますが、その理由は正確にはわかりません...

asdf2.html (sub-nav.html ページを sub-nav div に読み込み、アクティブなクラスをリンクに追加します):

<div id="sub-nav"></div>

<script>
jQuery(function(){
    $('#sub-nav').load('sub-nav.html', function() {
         $('#sub-nav a:contains("Link")').parent().addClass('active'); //WORKS
         $('#sub-nav a:contains("subLink")').parent().addClass('active'); //DOESN'T WORK
    })
});
</script>

sub-nav.html (div の li は addClass を実行しません):

<div class="well sidebar-nav span3" style="margin-left:0px;">
      <ul class="nav nav-list">
           <li><a href="asdf.html">Link</a></li>
           <div>
               <li><a href="asdf2.html">subLink</a></li>
           </div>
      </ul>
</div>
4

3 に答える 3

0

これを行う簡単な方法があります。ロードされた URL を確認してから、クラスを関連する li アイテムに追加する必要があります。そう、

<script>
  $(function(){
     var pageLink = document.URL;
     $("#yourNavDiv").children("li").each(function(){
         if($(this).children("a:first-child").attr("href") == pageLink){
             $(this).addClass("active");
         }
     });
  });
</script>
于 2013-06-25T12:52:47.533 に答える