Question

我在导航栏中的<li>元素中有一些<ul>元素，有一个名为＆＃34; active＆＃34;有一些属性来定义活动页面，我想在单击它时将此类添加到其中一个，并使用Javascript从这个<li>兄弟中删除它，而不使用任何框架只是纯Javascript。

<ul class='tabs'>
   <li class='active'>Home</li>
   <li>About</li>
   <li>Contact</li>
</ul>

因此，当点击另一个页面名称时，“活跃”＆＃39; class将从其他类中删除并添加到该页面名称。

Answer 1

尝试以下代码：

[].forEach.call(document.querySelectorAll('.tabs li'), function(el) {
    el.addEventListener('click', function(e) {
         var activeItem =  document.querySelector(".tabs li.active");
       if(activeItem)
       {
         activeItem.classList.remove("active");
       }
       el.classList.add("active");
    });
});

编辑代码，以防您没有任何初始有效项目

Answer 2

可以使用document.querySelector选择一个链接节点列表，并为点击事件附加一个事件监听器。

const links = document.querySelectorAll('.tabs li');

function activate(links) {
  links.forEach(function(link) {
    link.classList.remove('active');
  });
  this.classList.add("active");
}

links.forEach(function(link) {
   link.addEventListener('click', activate.bind(link, links));
});

.active {
  color: red;
}

<ul class='tabs'>
   <li class='active'>Home</li>
   <li>About</li>
   <li>Contact</li>
</ul>

Answer 3

这是在父UL上仅使用1个事件监听器来实现此目的的最有效方式：

＆＃13;

document.querySelector('.tabs').addEventListener('click', function(e) {

    var current = e.target; // the item clicked

    // all li items
    var items = current.parentElement.querySelectorAll('li');
    
    // go through each li and remove .active unless current
    Array.prototype.slice.call(items).forEach(function (item) {
        item.className = (item === current) ? 'active' : '';
    });
});

＆＃13;

.active {
  color: red;
}

＆＃13;

<ul class='tabs'>
   <li class='active'>Home</li>
   <li>About</li>
   <li>Contact</li>
</ul>

＆＃13;

如何将一个类添加到单击的<li>并使用Javascript从其兄弟中删除此类？

3 个答案: