javascript - 纯 JavaScript |将类添加到 <li> 元素

Question

我正在尝试为 <li> 添加类点击事件上的元素。如果我单击第一个元素，它应该获得类“current-tab”和其他<li>元素不应包含该类等。 下面是一些 HTML 代码:

<nav class="interest-nav">
  <ul id="interest-ul">
     <li><a href="#box1">Fashion</a></li>
     <li><a href="#box2">Movies</a></li>
     <li><a href="#box3">TV</a></li>
  </ul>
</nav>

和 JavaScript 代码:

var navUl = document.getElementById('interest-ul').getElementsByTagName('li');
for (var y = 0; y < navUl.length; y++) {
    navUl[y].addEventListener('click', checkLi);
}

function checkLi() {
    if (navUl.className === '') {
        navUl.className = 'current-tab';
    } else {
        navUl.className = '';
    }
}

感谢您的关注和帮助!

Answer 1

您正在尝试在数组上设置类。您可以通过向列表本身添加事件监听器来简化此脚本，然后使用事件目标。

var navUl = document.getElementById( 'interest-ul' );
navUl.addEventListener( 'click', checkLi );

function checkLi( event ) {
  // Just for testing... remove the following line:
  console.log( 'clicked on', event.target.tagName );
  // Only apply our actions if we really clicked on the link.
  if ( event.target.tagName === 'A' ) {
    navUl.querySelectorAll( 'li' ).forEach( el => el.classList.remove( 'current-tab' ) );
    event.target.parentNode.classList.add( 'current-tab' );
  }
}

.current-tab {
  font-weight: bold;
}

<nav class="interest-nav">
  <ul id="interest-ul">
    <li><a href="#box1">Fashion</a></li>
    <li><a href="#box2">Movies</a></li>
    <li><a href="#box3">TV</a></li>
  </ul>
</nav>