Databases
StackOverflow2013
Postsdbo
POSet an active class on <li> with javascript not working as it should
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSet an active class on <li> with javascript not working as it should
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload