Как сделать активным пункт меню?

Question

[drtvader]

Добрый день! Есть меню:

<ul>
    <li><a>Первый пункт</a></li>
        <ul>
            <li><a>Первый пункт</a></li>
            <li><a>Второй пункт</a></li>
        </ul>
    <li><a>Второй пункт</a></li>
</ul>

Как сделать, что бы при переходе на второй уровень, третий и т.д. предыдущие ссылки оставались активными.

Answer 1

[Anna Semenova]

$(function(){
  $('.menu ul li a').each(function(){
    if(document.location.pathname == $(this).attr('href')){
      $(this).parent().addClass('active');
   }
  });
});

<div class="menu>
<ul>
    <li><a>Первый пункт</a></li>
        <ul>
            <li><a>Первый пункт</a></li>
            <li><a>Второй пункт</a></li>
        </ul>
    <li><a>Второй пункт</a></li>
</ul>
</div>

Comments

[drtvader]

я так понимаю где 'ul li a' надо прописать свои классы еще?

Answer 2

[Андрей Гончаров]

Ну тут от настройки шаблона cms зависит, а не от фронтенда. Если сайт без cms, то ручками просто прописывать класс активного пункта для нужных пунктов меню на каждой странице. Типа:

<ul>
    <li class="current"><a>Первый пункт</a></li>
        <ul>
            <li class="current"><a>Первый пункт</a></li>
            <li><a>Второй пункт</a></li>
        </ul>
    <li><a>Второй пункт</a></li>
</ul>

Comments

[drtvader]

Спасибо, попробую!