Question

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

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

可能有人可能会建议一些更聪明的东西吗？

Answer 1

这就是我通常的做法 - 在网址的最后一个/后面获取当前页面并突出显示与其匹配的链接。例如。此页面将返回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-name等于index.html的列表项会获得班current。

此解决方案没有问题，因为您只需要一个导航树，因为您不必编辑每个页面来向元素添加ID或类。如果更改文件名，你做会发现自己陷入混乱，因为你必须更改每个文件中的data-page-name属性（尽管你必须更改锚href无论如何）。

Superfish jquery插件，突出显示所选菜单项

2 个答案: