меню

Допустим нужно выделить текущий пункт меню отдельным стилем. Иногда, это сделать просто невозможно (в случае 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);
  

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

Замыкания в JavaScript

Замыкание — это функция, объявленная внутри другой функции и имеющая доступ к переменным внешней (вмещающей) функции. Простыми словами замыкание — это функция, описанная внутри другой функции.

Зачем нам нужен TypeScript?

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

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

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

Что такое ECMAScript и чем это отличается от JavaScript

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

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

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

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

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

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

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

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