0

次のように、アクティブなクラスを html コードのすべてのメイン カテゴリ ブロックに追加します。

<ul class="tabs">

   <li class="accordion"><a href="#tab1">Boo1</a>

           <ul id="sub-nav">
              <li><a href="http://www.myweb.com"> Ipsum Text</a></li>
              <li><a> Lorem text</a></li>
              <li><a> More lorem text </a></li>
              <li><a> Dolor Sit Amet </a></li>
           </ul>                                   

  </li> 


  <li><a href="#tab2">Boo2</a></li>
  <li><a href="#tab3">Boo3</a></li>
  <li class="last-item"><a href="#tab4">Boo4</a></li>

</ul>​

このようにスタイル:-

#sub-nav  > .active {background:#AAA;}
.tabs li a.active { background: green; }
.tabs li a {font-size:20px;}
#sub-nav li a {font-size:16px; margin-left:20px;}

</p>

だから私はこれをしました:-

(function(){
    $('.tabs #sub-nav li').bind('click', function(e){
        var subNavList   = $(this),
            list = $('.tabs').find('li').add('.tabs a');
            list.removeClass('active');  


        subNavList.addClass('active').parents('li').addClass('active').children('a').addClass('active');
    });
}());​

私の唯一の問題は、他のナビゲーション リスト (boo2 と boo3) をクリックすると、アクティブなクラスが適用されないことです。理解を深めるために、jsfiddle コードを確認してください。http://jsfiddle.net/gfkM4/6/ 私は何をしているのですか？いくつか私を助けてもらえますか？

4

1 に答える 1

3

これがあなたが探しているものだと思います（クリックしたときに上部のナビゲーションを選択し、クリックしたときにサブナビゲーションとその親の両方を選択します）：

http://jsfiddle.net/gfkM4/9/

(function(){

    $('.tabs a').on('click', function(e){
        $('.tabs a').removeClass('active');
        $(this).addClass('active');
        $(this).closest('ul').closest('li').children('a').addClass('active');
    })       

}());​
于 2012-07-23T18:43:49.607 に答える