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

Question

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

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

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

Answer 1

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

一种可能性是使用锚的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），发现自己陷入一片混乱。

Answer 2

这就是我通常的做法 - 获取当前页面在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');