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

В этой теме поговорим о том как сделать ссылку активной при переходе в определенный раздел,

1шаг. Созадем меню
<ul>
    <li><a href="#">Меню</a></li>
    <li><a href="#">Меню</a></li>
    <li><a href="#">Меню</a></li>
    <li><a href="#">Меню</a></li
</ul>

2шаг. Создаем стили для активного пункта
ul li a.active {
    color: #fff;
    background: #4c92bd;
}


3шаг. Подключаем библиотеку jQuery. Пропишите перед закрывающим тегом </body>
<script type="text/jаvascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

4шаг. Подключаем наш скрипт
$(".top-menu li a").each(function () {if (this.href == location.href) this.className = "active";});
Добавить комментарий

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив