@Shahriyor_dev

Как написать скрипт js навигационного панеля?

На сайте есть навигационная панель, но она работает некорректно:
1. При перезагрузке активной остается 1, но хэш остается как 3 или 4
2. При доскролле на определенную секцию она не меняет активность

Пример работы этой навигации тут: https://bankrot-fpk.ru/

Мой код js:
const navLink = document.querySelectorAll('.m_scrollspy ul .nav-link');


for (let i = 0; i < navLink.length; i++) {
    navLink[i].onclick = () => {
        // Удаляем класс у всех
        navLink.forEach(function(el) {
            el.classList.remove('active');
        });
        //Добавляем класс выбранному
        if (!navLink[i].classList.contains('active')) {
            navLink[i].classList.add('active')
        }
    }
}


<div class="m_scrollspy" id="navbar-example">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a href="#m_one" class="nav-link active">01</a></li>
            <li class="nav-item"><a href="#m_two" class="nav-link">02</a></li>
            <li class="nav-item"><a href="#m_three" class="nav-link">03</a></li>
            <li class="nav-item"><a href="#m_four" class="nav-link">04</a></li>
            <li class="nav-item"><a href="#m_five" class="nav-link">05</a></li>
            <li class="nav-item"><a href="#m_six" class="nav-link">06</a></li>
            <li class="nav-item"><a href="#m_seven" class="nav-link">07</a></li>
            <li class="nav-item"><a href="#m_eight" class="nav-link">08</a></li>
        </ul>
    </div>


Пожалуйста помогите поподробнее
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
@tihomirovPro
Frontend developer
Вот пример решения, можешь адаптировать его под свой код
https://codepen.io/tihomirovpro/pen/abExZrv
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы