Set an active class on <li> with javascript not working as it should
<p>I have a little problem getting the javascript to set an active class on my "li" menu items.</p>

<p>The menu is constructed in php like below.</p>

<pre><code>&lt;nav class="categoriesMenu"&gt;
&lt;ul class="nav nav-tabs categories"&gt;
&lt;?php
        $i=0;
            foreach($categories as $k=&gt;$v){
            $space = array(" ");
            $normalizedCategory = str_replace($space, "", $k);
            echo "&lt;li id='id$normalizedCategory'&gt;";
                 if($i==0){
                    echo "&lt;a href='#'&gt;$k&lt;/a&gt;";
                 }else{
                    echo "&lt;a href='#'&gt;$k&lt;/a&gt;";
                 }
                 $i++;
              echo "&lt;/li&gt;";
           } ?&gt;
&lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>And i have the following javascript setting the active classes based on clicks but i cant get it to set the active class on "li" only on an "a" tag</p>

<pre><code>$(document).ready(function(){

var selectCategory=function(id){
        var ref=id.replace(' ','');
        var classSelector=ref.replace(' ','');
        $("nav &gt; ul.categories &gt; li").removeClass("active");
        $("#"+ref+" &gt; li").addClass("active");
        $('nav &gt; ul.subCategories &gt; li').hide();
        $('nav &gt; ul.subCategories &gt; li.'+classSelector).show();
}

$('nav &gt; ul.subCategories &gt; li').click(function(){
               if(!$(this).children('li').hasClass("active")){
                 window[$(this).attr('title')]();
               }
               $('nav &gt; ul.subCategories &gt; li').removeClass("active");
               $(this).children().addClass("active")
           });

$('nav &gt; ul.categories &gt; li').click(function(){
            var reference=$(this).attr('id');
            selectCategory(reference);
})

var firstCat=$('nav &gt; ul.subCategories &gt; li:first').attr('class');
selectCategory(firstCat);

})
</code></pre>

<p>The menu gets rendered in this format</p>

<pre><code> &lt;div class="navigation"&gt;
 &lt;nav class="categoriesMenu"&gt;
 &lt;ul class="nav nav-tabs categories"&gt;
 &lt;li id='idManagement'&gt;
      &lt;a href='#'&gt;Management&lt;/a&gt;
 &lt;/li&gt;
 &lt;li id='idReports'&gt;
      &lt;a href='#'&gt;Reports&lt;/a&gt;
 &lt;/li&gt;
 &lt;li id='idUsers'&gt;
      &lt;a href='#'&gt;Users&lt;/a&gt;
 &lt;/li&gt;
 &lt;li id='idAdministration'&gt;
     &lt;a href='#'&gt;Administration&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;

 &lt;nav class="subCategoriesMenu"&gt;
 &lt;ul class="nav nav-pills subCategories"&gt;
 &lt;li class='idManagement' id='idManagementRequests' title='RequestsInterface'&gt;
      &lt;a&gt;Requests&lt;/a&gt;
 &lt;/li&gt;
 &lt;li class='idManagement' id='idManagementTeamActivity' title='ActivityInterface'&gt;
 &lt;a&gt;Team Activity&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;
</code></pre>

<p></p>

<p>Any help would be much appreciated. 
Thank you</p>
