JQuery不工作添加css类

我需要更改活动页面的菜单项的背景。我试图用JQuery和CSS来实现这一点。JQuery不工作添加css类

我的代码是： HTML

<ul class="nav"> 
    <li id="header"><a href="Default.aspx">Home</a> </li> 
    <li>|</li> 
    <li><a href="About.aspx">About</a> </li> 
</ul>

CSS

.nav li.active { 
    background-color:green; 
} 
.nav li.active a { 
    color:#fff; 
    font-weight:bold; 
    background-color:green; 
}

最后我使用这下面的JQuery的。

$(function() { 
    setNavigation(); 
    /* below statement is just to verify if jquery working at all*/ 
    $('#header').css("background-color", "green"); 
}); 

function setNavigation() { 
    var path = window.location.pathname; 
    path = path.replace(/\/$/, ""); 
    path = decodeURIComponent(path);    
    $(".nav a").each(function() {    
    var href = $(this).attr('href'); 
    if (path.substring(0, href.length) == href) { 
     $("a").closest('li').addClass('active'); 
     /* below statement is just to verify if jquery working*/ 
     $('#header').css("background-color", "green");     
    } 
    }); 
}

我试图调试这是使用萤火虫仍然找不到的错误。我是一个新手，jQuery和这不是工作（可能是一个愚蠢的错误）:( 任何人都可以请帮我这个？

来源

2014-10-20 Amruta Chitale

在控制台中的任何错误？在if语句之前抛出一个控制台语句来验证条件是否被满足。 – tymeJV 2014-10-20 20:19:26

如果您的标题永远不会变绿，那是因为您的状况不佳。尝试通过检查href是否包含在如下路径中来修改它：if（path.indexOf（href）> = 0） – 2014-10-20 20:22:48

它工作..：D谢谢吨Mathieu。并且将“a”改为这个。工作和寻找gr8。：D – 2014-10-21 06:37:29

当您在.each循环的时候，$(this)指当前对象。在被迭代希望将类添加到当前锚，不所有锚所以，你会想更改以下行：

变化$("a").closest('li').addClass('active');

这条线：

$(this).closest('li').addClass('active');

来源

2014-10-20 20:20:08

我也试过。它仍然没有工作。我故意添加了“a”来查看是否添加了该类。 – 2014-10-21 06:15:13

@AmrutaChitale你确定它甚至可以在代码中做到这一点吗？放一个'alert'方块，里面写着'$（'a'）。closest（'li'）....'因为我认为它不会超过你对'href'行的检查 – 2014-10-21 13:00:53

$("a").closest('li').addClass('active');总是会做同样的事情，无论你在哪个页面上。它会将active类添加到每li它有一个锚点作为一个孩子，因为你选择每锚页面$("a")。

也许你想是这样的：

$(this).closest('li').addClass('active');

来源

2014-10-20 20:20:23

downvoter是否在意解释downvote？ – 2014-10-20 20:24:54

JQuery不工作添加css类

回答

相关问题