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>

Answer 2

您可以将this传递给该函数。在函数内部，您可以先从所有元素中删除 class ，然后仅将 class 添加到当前元素中。

请注意：：您还可以使用Document.querySelectorAll()，该参数允许有效的CSS selectors作为参数。

var navUl = [].slice.call(document.querySelectorAll('#interest-ul > li'));
for (var y = 0; y < navUl.length; y++) {
    navUl[y].addEventListener('click', function(){checkLi(this)});
}

function checkLi(current) {
  navUl.forEach(el => el.classList.remove('current-tab'));
  current.classList.add('current-tab');
}

.current-tab{
  background-color: lightgray;
}

<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>

您也可以使用Event.currentTarget：

var navUl = [].slice.call(document.querySelectorAll('#interest-ul > li'));
for (var y = 0; y < navUl.length; y++) {
  navUl[y].addEventListener('click', checkLi);
}

function checkLi(event) {
  navUl.forEach(el => el.classList.remove('current-tab'));
  event.currentTarget.classList.add('current-tab');
}

.current-tab{
  background-color: lightgray;
}

<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>

Answer 3

var navUl = document.getElementById('interest-ul').getElementsByTagName('li');
for (var y = 0; y < navUl.length; y++) {
  navUl[y].addEventListener('click', checkLi);
}

function checkLi(ev) {
  document.querySelector('.current-tab').classList.remove('current-tab');

  ev.target.classList.add('current-tab');
}

.current-tab {
  color: red;
}

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

Answer 4

在您的代码中，您尝试将class设置为整个集合（navUl.className = 'current-tab';）。但是您应该迭代元素。

第二件事是关于循环的。将您的长度缓存在循环之前的变量中，这样会更快一些。

var navUl = document.getElementById('interest-ul').getElementsByTagName('li');

for (var y = 0, l = navUl.length; y < l; y++) {
    navUl[y].addEventListener('click', checkLi);
}

function checkLi() {
    for (var y = 0, l = navUl.length; y < l; y++) {
        navUl[y].classList.remove('current-tab');
    }
    this.classList.add('current-tab');
}

纯Java语言|将类添加到<li>元素

4 个答案: