Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Подсветка элемента меню при загрузке страницы в браузере (https://javascript.ru/forum/css-html/86078-podsvetka-ehlementa-menyu-pri-zagruzke-stranicy-v-brauzere.html)

NastyaVs 04.09.2024 18:33

Подсветка элемента меню при загрузке страницы в браузере
 
Добрый день. Помогите дополнить код который бы позволял подсвечивать элемент меню когда страница первоначально загружается в браузере (соответственно это будет элемент меню 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");
    }
 });

Aetae 04.09.2024 19:17

const currentPage = window.location.pathname.split("/").pop() || 'index.html';

NastyaVs 04.09.2024 19:27

Цитата:

Сообщение от Aetae (Сообщение 556120)
const currentPage = window.location.pathname.split("/").pop() || 'index.html';

Спасибо большое


Часовой пояс GMT +3, время: 15:04.