как сделать активный элемент навбара

Question

<ul class="nav-box">
                    <li class="nav-list">Home</li>
                    <li class="nav-list">About me</li>
                    <li class="nav-list">Porfolio</li>
                    <li class="nav-list">Contact</li>
                </ul>


//---

---------js------------

navItems.forEach((item, index) => {
    item.addEventListener('click', function(event){
        console.log(index)
        if(item.classList.contains('active')){
            item.classList.remove('active')
        }else{
            item[index].classList.add('active')        
        }
    })
})

Answer 1

let navItems = document.querySelectorAll('.nav-list');

navItems.forEach((item, index) => {
    item.addEventListener('click', function(event){
        navItems.forEach(el => {
            el.classList.remove('active');
        });
        
        this.classList.add('active');
    })
})

.active { background: blue; color: white; }

<ul class="nav-box">
                    <li class="nav-list">Home</li>
                    <li class="nav-list">About me</li>
                    <li class="nav-list">Porfolio</li>
                    <li class="nav-list">Contact</li>
                </ul>

Answer 2

<ul class="nav-box">
   <li class="nav-list">Home</li>
   <li class="nav-list" onclick="openCity(event, 'About me')" id="defaultOpen">About me</li>
   <li class="nav-list">Porfolio</li>
   <li class="nav-list">Contact</li>
</ul>

<script>
    document.getElementById("defaultOpen").click();
</script>

БЛОГ НА HUSL

как сделать активный элемент навбара

Ответы (2 шт):