среда, 4 июня 2014 г.

Выделение активного пункта меню с помощью jQuery

  • Подключаем jQuery
  • HTML код меню

  • <nav>
      <ul class="menu">
        <li><a href="/">Главная</a></li>
        <li><a href="/portfolio">Портфолио</a></li>
        <li><a href="/blog">Мой блог</a></li>
        <li><a href="/contacts">Контакты</a></li>
      </ul>
    </nav>

  • Стиль для выделения активного пункта меню

  • .menu li.current a{
     color:#F7941E;
     text-decoration:none;
    }

  • Каждой активной ссылке будем присваиваем класс "current".

  • <script type="text/javascript">
      $(document).ready(function(){
        var link = window.location.pathname;
        $('.menu li a[href="'+link+'"]').parent().addClass('current');
      });
    </script>