Добрый день. Помогите дополнить код который бы позволял подсвечивать элемент меню когда страница первоначально загружается в браузере (соответственно это будет элемент меню Home). И после клика на другой элемент меню (перехода на другую страницу) подсветка деактивировалась и послечивался уже элемент меню соответствующей страницы на которую был осуществлен переход. На текущий момент код позволяет подсвечивает элемент меню только в том случае, когда был осуществлен переход на соответсвующую страницу.
<div class="menu">
<nav class="menu__body">
<ul class="menu__list">
<li class="menu__item"><a href="index.html" class="menu__link">Home</a></li>
<li class="menu__item"><a href="about.html" class="menu__link">About us</a></li>
<li class="menu__item"><a href="service.html" class="menu__link">Service</a></li>
<li class="menu__item"><a href="projects.html" class="menu__link">Projects</a></li>
<li class="menu__item"><a href="blog.html" class="menu__link">Blog</a></li>
<li class="menu__item"><a href="contact.html" class="menu__link">Contact us</a></li>
</ul>
</nav>
</div>
.menu {
// .menu__link
&__link {
&.active{
color: var(--denim_blue);
}
}
}
const currentPage = window.location.pathname.split("/").pop();
const menuLinks = document.querySelectorAll(".menu__link");
menuLinks.forEach((link) => {
if (link.getAttribute("href") === currentPage) {
link.classList.add("active");
}
});