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

категория: jQuery
Очень часто встречается в оформлении сайта потребность выделять активный пункт меню, раньше я реализовывал это с помощью php, но слава Богу завязал :) Проще простого реализовать свою потребность с использованием jQuery. С помощью Django не пробывал - да и есть ли смысл? Есть такое меню:
<nav>
  <ul class="menu">
    <li><a href="{% url index %}">Главная</a></li>
    <li><a href="{% url works %}">Портфолио</a></li>
    <li><a href="{% url blog %}">Мой блог</a></li>
    <li><a href="{% url contact_form %}">Контакты</a></li>
  </ul>
</nav>
И есть такие стили:
.menu li.active,
.menu li a:hover {
  background-position:0 0; 
  background-color: #f8f8f8; 
  color:#4400aa; 
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
}
Теперь просто каждой активной ссылке будем создавать класс "active". Не забываем подключить jQuery.
<script type="text/javascript">
  $(document).ready(function(){
    var link = window.location.pathname;
    $('.menu li a[href="'+link+'"]').parent().addClass('active');
  });
</script>
Все в жизни очень просто :)


blog comments powered by Disqus