Superfish JQuery плагин, выделите выделенный пункт меню - PullRequest
Новая
       30

Superfish JQuery плагин, выделите выделенный пункт меню

0 голосов
/ 19 сентября 2011

Мне просто интересно, что является более «не жестко закодированным» подходом, который я могу использовать, чтобы выделить текущее выбранное меню при использовании плагина superfish.

Например, этот http://hicksdesign.co.uk/journal/highlighting-current-page-with-css выглядит очень «жестко закодированным» способом.

Может быть, кто-то может предложить что-то более умное?

Ответы [ 2 ]

1 голос
/ 20 сентября 2011

Обычно я так делаю - получаю текущую страницу после последней / в 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');
0 голосов
/ 19 сентября 2011

К сожалению, если вы не используете динамический язык для отображения ваших страниц, трудно обеспечить аккуратное и опрятное решение для этого.

Одна из возможностей - использовать атрибут якоря 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.

. Это правильное решение: вам нужно только одно дерево навигации, поскольку вам не нужно редактировать каждую страницу , чтобы добавить идентификатор или класс вэлемент.Вы делаете попадаете в беспорядок, если вы изменяете имя файла, потому что вы должны изменить атрибут data-page-name в каждом файле (хотя вы должны будете изменить якорь href в любом случае).

...