如何使用 jQuery 添加基于文件名的类？

Question

我正在设计一个具有相同导航的网站，但我希望在导航中突出显示当前页面。

为此，我尝试使用此 jQuery 代码...

$(document).ready(function() {
 var $filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
 var $element = $('#' + $filename);
 $($element).addClass('active');
 });
});

..在这个 HTML 代码上（我给了每个不同的 id，因为我不确定哪个会起作用）...

<nav class="closed">
 <a id="index" href="#">Home</a>
 <a id="index.php" href="#">About</a>
 <a id="/index.php" href="#">Forum</a>
 <a id="\index.php" href="#">Get involved</a>
</nav>

但是，我似乎无法让这段代码工作。如何根据当前 URL/文件名向具有特定 id 的元素添加类？

Answer 1

代替：

var $element = $('#' + $filename);
$($element).addClass('active');

使用

$('#' + $filename).addClass('active');

使用 jQuery 代替 document.ready。 完整代码：

$(function() {
    var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    var element = $('#' + $filename);
    $(element).addClass('active');
});

甚至更短，但更难调试：

$(function() {
    $('#' + (window.location.pathname.split('/').pop())).addClass('active');
});

请记住，如果用户自带，例如 index.php?id=2，您使用的方法可能会出错。明智的做法是使用：

var filename = (window.location.pathname.split('/').pop()).split('?')[0];