[英]Set an active class on <li> with javascript not working as it should
I have a little problem getting the javascript to set an active class on my "li" menu items. 我在使用javascript在“ li”菜单项上设置活动类时遇到了一些问题。
The menu is constructed in php like below. 菜单如下所示在php中构建。
<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 而且我有以下javascript基于点击来设置活动类,但我无法让它仅在“ a”标签上将活动类设置为“ li”
$(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
http://jsfiddle.net/nzjhK/32
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.