Javascript 将类添加到父LI，其中A=当前文档？

如果文件名与href匹配，我会尝试自动向LI追加一个类（例如，如果锚点的href属性设置为about.php，而当前页面的文件名为about.php，则会追加该类），一路上我遇到了一些复杂的问题，我对语法有点困惑

到目前为止我有这个

var filename = location.pathname.substring(1)

$(document).ready(function(){
    $('a').each(function() {
        if (this.href === filename) {
            $(this).parent('li').addClass('current_page_item');
        }
    });
});

我的导航结构如图所示，如您所见，它可以正常工作，但只有在手动设置类时。。。所以我试图让它从实际的文件名自动运行

我希望这对某些人来说是有意义的，因为我现在真的很困惑如何让它工作

感谢所有对此做出贡献的人，这非常有帮助，并将帮助我进一步理解jquery语法，实际上选择一些特定的东西并在jquery中编写一个逻辑语句确实让我感到困惑，因为它与PHP非常不同，这正是我所习惯的

我的标记看起来是这样的，因为我以前没有包含它，只是假设人们会看源代码来理解我的意思（不过，我应该把它放在这里）

---

谢谢。

我假设li tag是anchor tag的父项，您可以试试这个-

$(this).parent().addClass('current_page_item');

相反：

$(this).parent('li').addClass('current_page_item');

---

根据您在问题中提供的少量信息，我建议（尽管这未经测试）：

这将获取当前页面URL的内容，并按

/

字符将其拆分，然后将数组的最后一个元素分配给变量

文件

，例如：

'http://example.com/directory/page.html'

转换为数组：

["http:", "", "example.com", "directory", "page.html"]

并且该数组的最后一个元素被分配给变量，因此

file

变为等于：

'page.html'

jQuery迭代

li

元素中的每个

a

元素，然后，如果在

href

属性中找到字符串

page.html

，它将返回

a

元素，并将类名添加到其父元素中

当然，您可以使用完整的

document.location.href

；这将使：

var page = document.location.href;
$('li a').filter(function(){
    return this.href == page;
}).parent().addClass('current_page_item');

其工作原理与此大致相同，但它不是查看是否可以在URL中找到文件名，而是检查元素的

href

是否与当前的

document.location.href

完全相同

参考资料：

• JavaScript:
  • 。 *jQuery：

---

我想你可以这么简单：

$(function(){
    $('a').filter(function() {
      return (this.href == location.href);
    }).parent('li').addClass('current_page_item');
});

---

​按href属性筛选锚定标记。似乎在这方面有所进展。由于某些原因，您必须点击run才能正常工作。
请在您的问题中显示（代表性/最低限度的样本）您的分数；堆栈溢出意味着问题和答案是自包含的，以防止链接腐烂。你真的应该用PHP来实现这一点。和的可能重复，以及这如何帮助基于当前页面和

a

元素的

href

动态分配类？我尝试了这个，但是，正如David所说，它实际上没有帮助根据文档名和导航的href元素动态分配类。感谢您的帮助，我很感激。我更新了JSFIDLE，并用它尝试了您的代码，当我添加代码而没有将类附加到标记中时，它似乎没有动画化并正确显示导航下的行。。。你现在可以自己看了，如果你要删除它并尝试你的脚本，它只是一个大的无生命的行。我感谢您提供的帮助和努力，谢谢。：）我以为我加了链接，但我想我没有@伏尔瓦尼亚，它起作用了。因为它在JSFiddle上，所以很混乱：转到这个链接：。然后点击Run，你会在RACES下面看到紫色条。哇！谢谢大家!！这工作！现在，我只需要以某种方式摆脱内联样式，哈哈。谢谢这都是很棒的信息，看到有人知道他们在说什么，我真的不习惯使用jQuery，所以这都是很棒的东西。虽然我自己实际上无法让它工作，但bozdoz的评论中有一个JSFIDLE，我把所有东西都放进去了，我也在那里尝试了你的代码，可能只是因为缺乏使用jQuery的知识，我无法让它正确显示。。。不过，感谢您的输入和建议，很高兴听到似乎有很多知识的人这么说……问题很可能是JS Fiddle本身，除非您已将URL复制到页面上某个链接的

href

？@Volvagia：例如，一旦页面以JS Fiddle呈现，链接“

href

属性为。请在您控制的页面中尝试此操作（其中

href

和

document.location

合理且可预测地在您的控制下）。我在本地主机中编辑它，因为我认为jquery编译属性的方式有问题，但我仍然遇到同样的问题。。。这门课根本不适用，不过我可能做错了什么。啊，很抱歉这么痛苦。

var page = document.location.href;
$('li a').filter(function(){
    return this.href == page;
}).parent().addClass('current_page_item');

$(function(){
    $('a').filter(function() {
      return (this.href == location.href);
    }).parent('li').addClass('current_page_item');
});