Как сделать грамотно добавление класса к активному пункту в меню?

Question

[Сергей Титов]

Моих знаний хватило на такой скрипт:

$(document).ready(function(){//addClass
    $('#left-sidebar > ul > li >a').each(function () {
        var domain = 'http://mydomain.ru';
        if(domain + $(this).attr('href') == location.href) $(this).addClass('select');
    });
  });

Однако есть такой нюанс, если перейти куда-то глубже, то меню не будет выделенным (что в принципе и логично, исходя из скрипта).
Например mydomain.ru/auto/ - к меню прибавится класс select, а mydomain.ru/auto/example/ - оставит меню без изменений, то есть активный пункт меню выбран не будет.
Как возможно это исправить?

Answer 1

[Евгений Петров]

Вообще такие вещи на сервере делаются.

if(new RegExp($(this).attr('href')).test(location.href)) {
	$(this).addClass('select');
}

Comments

[Сергей Титов]

А в чем тут разница на сервере или в js? Поясните, если не сложно.

[Евгений Петров]

Структуру и состояние документа при прочих равных лучше получать от сервера.
Состояние элемента может определяться не только формальными, но и логическими признаками.

Answer 2

[Алексей Уколов]

var domain = location.protocol + '//' + location.host;
var currentURL = location.href;

$(document).ready(function(){
    $('#left-sidebar > ul > li >a').each(function () {
        if (currentURL.indexOf(domain + $(this).attr('href')) === 0)
        {
            $(this).addClass('select');
        }
    });
  });

Comments

[Сергей Титов]

спасибо, сейчас попробую :)
а можете посоветовать какой-то хороший форум? я сколько искал все они какие-то не торт были во всех отношениях :(

[Сергей Титов]

странно, так выделение пункта меню пропало вообще

[Алексей Уколов]

Сергей Титов: Там лишняя переменная была, я исправил. Попробуйте разобраться что этот код делает, посмотрите ошибки в консоли, будет очень полезно.

[Сергей Титов]

а все, вижу Вы поправили, спасибо большое, помогло, остальным тоже спасибо за советы :)

[Евгений Петров]

location.port не забыли? Уж коль оперируете сложносоставной строкой — для таких вещей есть регулярки.

[Алексей Уколов]

Евгений Петров: да, эту задачу можно решить регуляркой, но я считаю, что это оверкилл в данном случае, как и указание порта.

[Евгений Петров]

Такие вещи нужно решать регуляркой. Впрочем, мне всё равно.

[Алексей Уколов]

Сергей Титов: Я бы рекомендовал тоже отметить ответ, который привел Евгений Петров, как решение. Он покрывает дополнительные граничные случаи.

[Алексей Уколов]

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

[Евгений Петров]

Миллион пунктов меню? Вы серьёзно?)

[Алексей Уколов]

Евгений Петров: разумеется, в данном случае это преувеличение, но если абстрагироваться от меню и представить что-то аналогичное, то такой вариант вполне реален.
Я к тому, что не стоит безапелляционно утверждать "нужно делать так", в большинстве случаев вариантов решения несколько и нужно выбирать исходя из достоинств и недостатков каждого.
Собственно, поэтому я свой вариант и добавил после вашего - чтобы была свобода выбора. Минус мне за то, что не расписал плюсы и минусы сразу.

[Евгений Петров]

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

Answer 3

[Денис Инешин]

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

Подсветку на стороне клиента делают только для SPA приложений.

Comments

[Алексей Уколов]

Только не "будет", а "может быть".

[Сергей Титов]

Алексей Уколов: да, тоже думаю, что не "будет", а "может быть", ибо не ощущал такого)

[Денис Инешин]

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

Answer 4

[ie6exe]

иногда можно так

$('#left-sidebar>ul>li>a').filter('[href="' + window.location.pathname + '"]').addClass('active');