添加「主動」類主選項卡列表

Question

我想活動類添加到所有主要類別擋在我的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;} 

所以我這樣做： -

(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/我在做什麼錯傢伙？有些人可以幫我嗎？

Answer 1

我相信這是你在找什麼（選擇點擊時也同時選擇subnav頂部導航和它的父當點擊時）：

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'); 
    })  

}());​