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');