嘗試使用 vanilla javascript 將活動類添加到我的導航欄

Question

有人請幫助我，每次我點擊其中一個時，我都會嘗試向我的導航項目添加一個活動類。 我不明白為什么它不起作用。

html

<ul class="nav__list">
                        <li class="nav__item"><a href="#home" class="nav__link active">Work</a></li>
                        <li class="nav__item"><a href="about.html" class="nav__link">About</a></li>
                        <li class="nav__item"><a href="mailto:barakadan421@gmail.com" class="nav__link">Contact</a></li>
</ul>

這是我的 css

.active {
  text-decoration: underline;
}

這是我的 javascript

const navMenu = document.getElementById('nav-menu'),
    navItems = document.getElementsByClassName('nav__item')

for(var i = 0; i < navItems.length; i++){
    navItems[i].addEventListener("click", function(){
        var current = document.getElementsByClassName("active")
        current[0].className = current[0].className.replace("active", "")
        this.className += "active";
    })
}

Answer 1

使用el.classList.add('.active')

for(var i = 0; i < navItems.length; i++){
    navItems[i].addEventListener("click", function(){
        // since you are only going to have one element
        // with active class use querySelector() as it
        // will return the first element with this class
        // no need to reference an index
        // provided you already have an active class in your DOM
        var current = document.querySelector(".active")
        // DOM will throw error if there is no active class
        // lets make sure one exists
        if(current){
          // then use classList to add/remove class names
          current.classList.remove('active')
        }
        this.classList.add('active')
    })
}

 const navItems = document.querySelectorAll('.navItems') for (var i = 0; i < navItems.length; i++) { navItems[i].addEventListener("click", function() { // since you are only going to have one element // with active class use querySelector() as it // will return the first element with this class // no need to reference an index // provided you already have an active class in your DOM var current = document.querySelector(".active") // let s make sure there is a current active class // before trying to remove it from DOM if (current) { // then use classList to add/remove class names current.classList.remove('active') } this.classList.add('active') }) }

 .active { text-decoration: underline; } ul { display: flex; justify-content: space-around; } li { list-style: none; }

 <ul> <li class="navItems active">Home</li> <li class="navItems">About</li> <li class="navItems">Contact</li> <li class="navItems">Projects</li> <li class="navItems">Resources</li> </ul>

使用一個函數進行重構，該函數也將確保在嘗試刪除之前存在active類。 還使用querySelectorAll返回一個nodeList，因此我們可以使用forEach循環遍歷 nodeList。 恕我直言，更清潔一點。

const navItems = document.querySelectorAll('.navItems')

// function for use in eventListener passing in event => e
function setActive(e){
  // get the parent of the event the UL
  const parent = e.target.parentNode
  // query the parent and get the active class
  const active = parent.querySelector('.active')
  // check for active class
  if(active){
    // toggle active class
    active.classList.toggle('active')
  }
  // add active class
  e.target.classList.add('active')
}

// forEach loop defining each node as the variable listItem
navItems.forEach(listItem => {
  // running click eventListener on each listItem with our setActive function
  listItem.addEventListener("click", setActive)
})

 const navItems = document.querySelectorAll('.navItems') function setActive(e){ const parent = e.target.parentNode const active = parent.querySelector('.active') if(active){ active.classList.toggle('active') } e.target.classList.add('active') } navItems.forEach(listItem => { listItem.addEventListener("click", setActive) })

 .active { text-decoration: underline; } ul { display: flex; justify-content: space-between; } li { list-style: none; }

 <ul> <li class="navItems active">Home</li> <li class="navItems">About</li> <li class="navItems">Contact</li> <li class="navItems">Projects</li> <li class="navItems">Resources</li> </ul>