I have a little problem getting the javascript to set an active class on my "li" menu items.
The menu is constructed in php like below.
<nav class="categoriesMenu">
<ul class="nav nav-tabs categories">
<?php
$i=0;
foreach($categories as $k=>$v){
$space = array(" ");
$normalizedCategory = str_replace($space, "", $k);
echo "<li id='id$normalizedCategory'>";
if($i==0){
echo "<a href='#'>$k</a>";
}else{
echo "<a href='#'>$k</a>";
}
$i++;
echo "</li>";
} ?>
</ul>
</nav>
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
$(document).ready(function(){
var selectCategory=function(id){
var ref=id.replace(' ','');
var classSelector=ref.replace(' ','');
$("nav > ul.categories > li").removeClass("active");
$("#"+ref+" > li").addClass("active");
$('nav > ul.subCategories > li').hide();
$('nav > ul.subCategories > li.'+classSelector).show();
}
$('nav > ul.subCategories > li').click(function(){
if(!$(this).children('li').hasClass("active")){
window[$(this).attr('title')]();
}
$('nav > ul.subCategories > li').removeClass("active");
$(this).children().addClass("active")
});
$('nav > ul.categories > li').click(function(){
var reference=$(this).attr('id');
selectCategory(reference);
})
var firstCat=$('nav > ul.subCategories > li:first').attr('class');
selectCategory(firstCat);
})
The menu gets rendered in this format
<div class="navigation">
<nav class="categoriesMenu">
<ul class="nav nav-tabs categories">
<li id='idManagement'>
<a href='#'>Management</a>
</li>
<li id='idReports'>
<a href='#'>Reports</a>
</li>
<li id='idUsers'>
<a href='#'>Users</a>
</li>
<li id='idAdministration'>
<a href='#'>Administration</a>
</li>
</ul>
</nav>
<nav class="subCategoriesMenu">
<ul class="nav nav-pills subCategories">
<li class='idManagement' id='idManagementRequests' title='RequestsInterface'>
<a>Requests</a>
</li>
<li class='idManagement' id='idManagementTeamActivity' title='ActivityInterface'>
<a>Team Activity</a>
</li>
</ul>
</nav>
Any help would be much appreciated. Thank you
I think you want:
var selectCategory=function(id){
var ref=id.replace(' ','');
var classSelector=ref.replace(' ','');
$("nav > ul.categories > li").removeClass("active");
$("#"+ref).addClass("active");
$('nav > ul.subCategories > li').hide();
$('nav > ul.subCategories > li.'+classSelector).show();
}
$('ul.subCategories li').click(function(){
/*if(!$(this).hasClass("active")){
window[$(this).attr('title')]();
}*/
$('nav > ul.subCategories > li').removeClass("active");
$(this).addClass("active");
});
$('nav > ul.categories > li').click(function(
var reference=$(this).attr('id');
selectCategory(reference);
});
var firstCat=$('nav > ul.subCategories > li:first').attr('class');
selectCategory(firstCat);
Does this fiddle do what you want? http://jsfiddle.net/nzjhK/32
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.