меню

Допустим нужно выделить текущий пункт меню отдельным стилем. Иногда, это сделать просто невозможно (в случае Ajax) или сложно из-за структуры меню и тут нам на помощь приходит JavaScript, а точнее jQuery:

Этот сниппет очень прост и заключается в том, что бы из полученного массива ссылок выбрать только ту, у которой атрибут href совпадает с адресом страницы.

  
$(function () {                 // Когда страница загрузится
  $('.lmenu a').each(function () {      // получаем все нужные нам ссылки
    var location = window.location.href;  // получаем адрес страницы
    var link = this.href;         // получаем адрес ссылки
    if(location == link) {          // при совпадении адреса ссылки и адреса окна
      $(this).addClass('active');     //добавляем класс
    }
  });
}); 
  

Нужно выделить и родителей ?

Если у вас древовидное меню, бывает, нужно выделить не только текущую ссылку но и ссылки родительских разделов, для этого используем метод Match(). Код будет таким:

  
$(function () {               // когда страница загружена
  $('.lmenu a').each(function () {    // проходим по нужным нам ссылками
    var location = window.location.href;// переменная с адресом страницы
    var link = this.href;       // переменная с url ссылки
    var result = location.match(link);  // результат возвращает объект если совпадение найдено и null при обратном

    if(result != null) {        // если НЕ равно null
      $(this).addClass('current');  // добавляем класс
    }
  });
});
  

Еще один способ

  
(function($){ 
  $(document).ready(function(){
    var pathname = window.location.pathname,
      page = pathname.split(/[/ ]+/).pop(),
      menuItems = $('#main_menu a');
    menuItems.each(function(){
      var mi = $(this),
        miHrefs = mi.attr("href"),
        miParents = mi.parents('li');
      if(page == miHrefs) {
        miParents.addClass("active").siblings().removeClass('active');
      }
    });
  });
})(jQuery);
  

Возможно, вам будет интересно

Как избежать повторной загрузки контента Jquery + Ajax + JSON

Как избежать повторной загрузки контента Jquery + Ajax + JSON. Для работы Front - End'а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.

Видео самоучитель jQuery от Envato

Видео курс от компании Envato, Видео курс на английском языке. jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода. Видео курс самоучителя jQuery позволит Вам научится работать на нем. Пройдя данный курс Вы научитесь основам работы с jQuery!

Велосипеды на Javascript и jQuery

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

Восемь типов данных и typeof

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

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту