Javascript 活动按钮在JQuery中不起作用

我有一个导航栏，如果我点击其中一个菜单按钮，它不会改变当前按钮的颜色。 在Laravel中，它工作得非常完美，如果我在没有任何框架的情况下这样做，我不知道为什么它不工作。有人能帮我吗？ 导航栏：

CSS:

---

您发布的javascript中没有任何内容涉及单击函数。您只需遍历所有元素并将toggle函数绑定到它们，这没有任何作用。尝试用如下方式单击替换每个：

var loc = window.location.pathname;

$('.activebtn').find('a').click(function() {
    $(this).toggleClass('active');
    $(this).attr('href', loc);
});

如果这没有帮助，请创建一个小提琴或代码笔，以便我们可以查看您的代码

My fiddle

您的代码几乎可以像编写的那样工作-假设DOM在该脚本运行时已准备就绪-但是window.location.pathname附带了一个前导/，它不包含在您的锚点HREF中，因此字符串永远不会匹配。要更正此问题，您只需将前导/包含在锚点中，或者清理pathname变量以匹配href属性中的内容：

//var loc=window.location.pathname； //为演示设置假位置： var loc=/profilepage.php； $'.exampleone'.find'a'。每个函数{ $this.toggleClass'active'，$this.attr'href'==loc； }; a{color:000} .active{color:F00}

---

您的项目中是否包含jQuery库？在chrome控制台中是否有任何错误？是的，我将jQuery包含在库中，因为其他javascript代码在该站点上工作。而且chrome控制台没有错误。我更换了，但它仍然不工作。我在chrome控制台中也没有看到任何错误。哈哈，糟糕，我没有读完代码。我更新了答案。此外，您错误地试图在toggleClass方法中链接href属性更改。这似乎误解了问题中代码的目的，据我所知，他没有尝试添加单击处理程序；看起来它打算在页面加载时运行一次：检查每个锚点，将其href与路径名进行比较，如果匹配，则添加“活动”类。问题的第一句说他想单击按钮并使其更改颜色。OP如果我编辑的代码对您没有帮助，请澄清您的问题，并提供一个工作代码示例，以便我们了解到底发生了什么。请注意，“按钮”会导致不同的页面，因此更改用户刚刚离开的页面上的颜色不会有多大影响。。。。

 var loc = window.location.pathname;

$('.activebtn').find('a').each(function() {
$(this).toggleClass('active', $(this).attr('href') == loc);
});

.navbar-default .activebtn a.active {
 padding: 0 21px;
 line-height: 33px;
 color: #56c93d;
 background: #323637;
 border-left: 0;
 border-right: 0;
 border-bottom: 3px solid #56c93d;
 background-image: -webkit-linear-gradient(top, #484e4f, #323637);
 background-image: -moz-linear-gradient(top, #484e4f, #323637);
 background-image: -o-linear-gradient(top, #484e4f, #323637);
 background-image: linear-gradient(to bottom, #484e4f, #323637);
 -webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
 box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
 border-bottom-color: #56c93d;
}

var loc = window.location.pathname;

$('.activebtn').find('a').click(function() {
    $(this).toggleClass('active');
    $(this).attr('href', loc);
});