4

ブートストラップツイッターを使用していますが、メニュー内のさまざまなサイトをクリックするとアクティブとして表示されます。この問題を扱う質問BootstrapTwitterCSSActiveNavigationを見つけました。

私の問題は、答えの1つでJQuery関数を機能させることができないことです。私の場合、HTMLで次のように機能させるには、変更は非常に簡単である必要があります。

<script>
$('body').on('.nav li a', 'click', function()
{
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active'))
    {
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});
</script>

<ul class="nav nav-pills pull-left">
    <li class="active"> <a href="home.html">Home</a> </li>
    <li> <a href="about.html">About</a> </li>
</ul>

何が問題なのかについての手がかりはありますか？前もって感謝します。

4

4 に答える 4

5

最初の回答へのコメントで質問に回答するために、.parents（'li'）は、現在の位置からDOMを上るときに見つかったliの親を取得します。：first疑似セレクターを追加すると、最初に見つかった疑似セレクターを確実に取得できます。

より良い解決策は、次のような.parent（単数）を使用することです$thisLi.parent('ul')。私はそれがあなたの問題だとは信じていません...

ブラウザが新しいページをロードしている可能性はありますか？私はあなたが電話をかけているのを見ませんevent.preventDefault()、実際あなたはあなたのコードでイベントをキャプチャしません、あなたはそれに応答するだけです...

また、.onは、イベントにバインドするための推奨される方法です。

$(function(){

    $('.nav li a').on('click', function(e){

        e.preventDefault(); // prevent link click if necessary?

        var $thisLi = $(this).parent('li');
        var $ul = $thisLi.parent('ul');

        if (!$thisLi.hasClass('active'))
        {
            $ul.find('li.active').removeClass('active');
                $thisLi.addClass('active');
        }

    })

})
于 2013-03-20T12:59:57.620 に答える
1

私はこれが少し遅いことを知っていますが、決して遅くないよりはましです。

私もこれと同じ問題を抱えていて、結局自分のコードを書くことになりました。

うまくいけば、これは私と同じようにすべての人に役立つでしょう。

jQuery

    $(document).ready(function () {
 var page = document.location.href;

 // Set BaseURL
 var baseURL = 'http://www.site.com/';

 // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  if(page == ''){
      $('#home').addClass('active');
  }else{
      $('#home').removeClass('active');
  }
  if(page == 'about'){
      $('#about').addClass('active');
  }else{
      $('#about').removeClass('active');
  }
  if(page == 'terms'){
      $('#terms').addClass('active');
  }else{
      $('#terms').removeClass('active');
  }
  if(page == 'contact'){
      $('#contact').addClass('active');
  }else{
      $('#contact').removeClass('active');
  }
});

標準のBootstrapメニューバーとの唯一の違いは、ホームページのliにid="home"を追加する必要があることなどです。

于 2013-07-27T05:46:22.270 に答える
0 
if (!$thisLi.hasClass('active'))
    {
        $ul.find('li').removeClass('active');
        $thisLi.addClass('active');
    }
于 2013-03-20T10:46:09.093 に答える
0

非常に簡単な解決策は、各ページの本文に、どのナビゲーション項目をアクティブにするかを示す異なるクラスを手動で追加することです。

次に、jQueryを使用して本体のクラスを確認し、それに応じてアクティブなNAVLIクラスを設定します。

<body class="nav-1-active">

<ul>
 <li class="nav1"><a href="#">Home</a></li>
 <li class="nav2"><a href="#">About Us</a></li>
 <li class="nav3"><a href="#">Our Services</a></li>
</ul>
于 2013-03-20T15:30:20.770 に答える