Adding the 'active' class to the main tab list part(2)
===

okay I really need help on this code guys cuz it's beginning to become very frustrating!

I have the following html code:-

    <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 like this:-

    #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;}
    #sub-nav li a.active {background:teal;}​

with a javascript like this:-

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

now you can check this fiddle for how I basically wont it work. -> `http://jsfiddle.net/gfkM4/24/`

My problem:- The script selects the anchor tags of the main nav (boo1 etc) and the sub nav (lorem text etc)  and applies the specific css to it. Now, this time, what I want to achieve is, the list elements of the `main nav` (boo1 etc) will instead be selected but still achieving the same result I've achieved in the fiddle.
This has frustruated me for HOURS! 