0

superfish プラグインを使用するときに、現在選択されているメニューを強調表示するために使用できる、より「ハードコードされていない」アプローチは何なのか疑問に思っています。

たとえば、このhttp://hicksdesign.co.uk/journal/highlighting-current-page-with-cssは、これを行うための非常に「ハードコードされた方法」に見えます。

もっとスマートなものを提案する人がいるかもしれませんか？

4

2 に答える 2

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');
于 2011-09-19T22:15:55.473 に答える
0

残念ながら、ページをレンダリングするために動的言語を使用していない限り、これに対する整然とした解決策を提供することは困難です。

href1 つの可能性は、文字列の一部と等しいアンカーの属性を使用することwindow.location.pathnameです。

たとえば、サイトがサーバーのルートにあり、HTMLindex.htmlページwork.htmlが.pathnamehref

ナビゲーションは次のようになります。

<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.htmlcurrent

ID やクラスを要素に追加するためにすべてのページを編集する必要がないため、必要なナビゲーション ツリーは 1 つだけであるという点で、このソリューションは問題ありません。ただし、ファイル名を変更すると、すべてのファイルの属性を変更する必要があるため、混乱することになります(とにかくdata-page-nameアンカーを変更する必要がありますhref)。

于 2011-09-19T15:08:45.967 に答える