jquery - 如何在导航栏中动态突出显示当前页面，如 Stackoverflow

Question

我的 header.php 页面中有一个导航栏，我将其包含在我网站的每个页面中。如何向当前页面添加一个 current_page 类？

我试过了

$('a[href="'+window.location+'"]').addClass('menu-highlight');

但是如果设置了我的 GET 变量，它就不起作用，并且我的 href 是相对 url。

我的一个想法是在 php 页面上，包括文件以保存与页面相对应的数字，并使用 Jquery 在属性中使用该数字更改 li。

最佳做法是什么？

Answer 1

最佳实践是在服务器端代码中处理这个问题。但是，如果您使用的是绝对路径链接，而不是完整的 URL 链接，则可以使用

window.location.pathname

排除查询字符串而不是

window.location.href

其中包括它

window.location.href
=> "http://stackoverflow.com/questions/10506079/how-to-dynamically-highlight-the-current-page-in-nav-bar-like-stackoverflow?test=foo"

window.location.pathname
=> "/questions/10506079/how-to-dynamically-highlight-the-current-page-in-nav-bar-like-stackoverflow"