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

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
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdexter4000
    1. USdexter4000
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSet an active class on <li> with javascript not working as it should
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe `.children()` function only gets you **immediate** descendants. Do your `<li>` elements really contain other `<li>` elements as immediate descendants? (I'm pretty sure they can't.)
      singulars
      1. POSet an active class on <li> with javascript not working as it should
      1. USPointy
    2. COTrying to figure out what you are doing. You menu looks only one level deep. So if you click on the li, what other li children are there to get? Are you trying to get their siblings?
      singulars
      1. POSet an active class on <li> with javascript not working as it should
      1. USLeeish
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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