html - Superfish jquery插件，高亮选中的菜单项

Question

我只是想知道在使用 superfish 插件时我可以使用什么更“非硬编码”的方法来突出显示当前选定的菜单。

例如，这个http://hicksdesign.co.uk/journal/highlighting-current-page-with-css看起来非常“硬编码方式”。

可能有人会提出更聪明的建议？

Answer 1

这就是我通常这样做的方式 - 在 url 中的最后一个 / 之后获取当前页面并突出显示与之匹配的链接。例如。此页面将返回superfish-jquery-plugin-highlight-selected-menu-item

var path = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
$('ul#main-navigation li a[href="' + path + '"]').addClass('active');

Answer 2

不幸的是，除非您使用动态语言来呈现您的页面，否则很难为此提供一个整洁的解决方案。

一种可能性是使用锚点的href属性，它等于window.location.pathname字符串的一部分。

例如，假设您的站点位于服务器的根目录，HTML 页面称为index.html等work.html。然后，您可以获取pathname（域名后的 URL 部分）并将其与锚点的href属性相匹配。

您的导航可能如下所示：

<nav>
  <ul>
    <li><a href="index.html">Index</a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="hobbies.html">Hobbies</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

您的 Javascript 可能如下所示：

var pathname = window.location.pathname;
// trim the first slash
var substr = pathname.substr(1);
$('nav').find('li a[href="' + substr + '"]').addClass('current');

因此，当您打开时index.html，变量substr等于，因此等于index.html的列表项获取类。data-page-nameindex.htmlcurrent

这个解决方案很好，因为您只需要一个导航树，因为您不必编辑每个页面来为元素添加 ID 或类。但是，如果您更改文件名，您确实会发现自己一团糟，因为您必须更改每个文件中的属性（尽管无论如何data-page-name您都必须更改锚点）。href