Superfish jquery插件，高亮选中的菜单项答案

【问题标题】：Superfish jquery plugin, highlight selected menu itemSuperfish jquery插件，高亮选中的菜单项
【发布时间】：2011-09-20 06:15:55
【问题描述】：

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

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

也许有人会提出更聪明的建议？

【问题讨论】：

标签： html jquery-plugins css superfish

【解决方案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');

【讨论】：

我没有添加 'active' 类，而是添加了 'sfHover' 类并从 plugins.js 文件或使用默认设置初始化插件的位置删除了默认设置 hoverClass:"sfHover"

【解决方案2】：

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

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

例如，假设您的站点位于服务器的根目录，HTML 页面称为 index.html、work.html 等。然后，您可以获取 pathname（网址后面的域名部分）并将其与锚点的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-name 等于index.html 的列表项将获得类current。

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

【讨论】：