375(33)640-98-68
375(29)935-83-38

Активное ссылка в меню при переходе

21.01.2019
Активное ссылка в меню при переходе

Бывают момент, когда при переходе на страницу, не видно где ты находишься на сайте (кроме хлебных крошек).

Для этого хочется выделить пункт меню, либо какой иной блок. Если рассмотреть по подробнее, то примерно выглядит это так. Имеем структуру допустим:

<nav class="menu">
 <ul>
  <li>1 step</li>
  <li>2 step</li>
  <li>3 step</li>
  <li>4 step</li>
 </ul>
</nav>

В данный момент меню находиться nav и имеет class .menu. При переходе в какой нить из .li, автоматический добавиться класс и сразу выделит его через CSS.

На примере мы нажмём на 3 пункт (3 step), тогда получиться вот так:

<nav class="menu">
 <ul>
  <li>1 step</li>
  <li>2 step</li>
  <li class="current">3 step</li>
  <li>4 step</li>
 </ul>
</nav>

Вы перейдёте на эту страницу и добавиться class .current.

Сам скрипт JS выглядит вот так:

$(function () {
    var location = window.location.href;
    var cur_url = '/' + location.split('/').pop();
 
    $('menu li').each(function () {
        var link = $(this).find('a').attr('href');
 
        if (cur_url == link)
        {
            $(this).addClass('current');
        }
    });
});

Вот и всё, оставлю на заметку, можно ещё доработать разные фишки, но СТАРТ уже есть. Всем удачи!

Рейтинг: 5/5 - 1 голосов

Комментарии (0)




Разрешённые теги: <b><i><br>Добавить новый комментарий:


Мы не пытаемся кричать что мы лучшие, просто делаем работу которая нравится.