Adding the 'active' class to the main tab list part(2)
<p>okay I really need help on this code guys cuz it's beginning to become very frustrating!</p>

<p>I have the following html code:-</p>

<pre><code>&lt;ul class="tabs"&gt;

   &lt;li class="accordion"&gt;&lt;a href="#tab1"&gt;Boo1&lt;/a&gt;

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

  &lt;/li&gt; 


  &lt;li&gt;&lt;a href="#tab2"&gt;Boo2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tab3"&gt;Boo3&lt;/a&gt;&lt;/li&gt;
  &lt;li class="last-item"&gt;&lt;a href="#tab4"&gt;Boo4&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;​
</code></pre>

<p>styled like this:-</p>

<pre><code>#sub-nav  &gt; .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;}​
</code></pre>

<p>with a javascript like this:-</p>

<pre><code>(function(){

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

}());​
​
</code></pre>

<p>now you can check this fiddle for how I basically want it work. -> <a href="http://jsfiddle.net/gfkM4/24/" rel="nofollow">http://jsfiddle.net/gfkM4/24/</a></p>

<p>My problem:- Assuming a user clicks the BOO1 button, I want to select the <code>li</code> of the BOO not its <code>a</code>. HOWEVER, when a user clicks on lorem button (and all the sub navs) I want to select it's anchor tag cuz the sub navs will basically contain links for redirection. 
If I go ahead and make the <code>li</code> active, it includes the child <code>a</code> in it's highlight.
So how do I get the <code>li</code> of the main nav active without including the child <code>a</code> in it's highlight?</p>
