javascript - 纯Javascript | 将类添加到元素

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 = '';
    }
}

感谢您的关注和帮助！

标签： javascripthtmlarrays

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>