js Подсветка активного пункта меню 

Дата публикации  Дата изменения11.10.21  Комментарии2   Просмотры7037

Курсы
<script language="JavaScript" type="text/javascript">
function highlight(){
  var atags=document.getElementsByTagName("li");
  for(i in atags){
    if(atags[i].className=="nav"){
        if(document.location.href==atags[i].firstChild.href){
            atags[i].className = "active";
        }
    }
  }
}
</script>

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

<ul>
     <li class="nav"><a href="/">Главная</a></li>
</ul>

Перед закрывающим тегом </body> вызываем функцию:

<script language="JavaScript" type="text/javascript">highlight()</script>

В css файле определяем class active.

Бесплатные курсы

Категории

Теги: , , ,

Оцените материал:

Рейтинг: 3.5/10 (4)


КомментарииКомментарии:

    Владислав

     

    Мне кажется, можно было сделать чуточку универсальнее, сделав селектор как параметр функции. Но кому нужно будет – сделает сам. Я реализовал похожим образом, на jQuery в три строчки кода :)

    моя версия: автоматическое подсвечивание активного пункта меню на jQuery в три строчки кода

    coder.hol.es /* Админ */

     

    Это очень хорошо – чем больше вариантов рабочих, тем лучше, думается — единственно — в вашем варианте требуется библиотека jQuery – а в материале на чистом js.


 

Старые →← Новые