Adding the 'active' class to the main tab list
===

I want to add the active class to all the main category block in my html code as follows:-

    <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>​

styled this way:- 

    #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;}

​

so I did this:-

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

my only problem now is when the other nav list is clicked (boo2 and boo3), the active class is not applied. Please check the jsfiddle code to understand better. http://jsfiddle.net/gfkM4/6/  What am I doing wrong guys?