javascript - 如何对除最后一个之外的所有 <li> 实现添加/删除类？

Question

我有一个列表 <li> <ul> 内的标签，我有一个 javascript 函数，当单击时将“事件”类添加到其中一个类并将其从其 sibling 中删除，我想将其实现到除最后一个 <li> 之外的所有类。

<ul class='tabs'>
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
   <li>
     <form>
       <input type='text'/>
        <button></button>
     </form>
   </li>
</ul>

JS函数:

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

Answer 1

您可以使用slice方法。

const listItems = Array.from(document.querySelectorAll('.tabs li'));
const selectableListItems = listItems.slice(0, -1);

selectableListItems.forEach(function(ele) {
    ele.addEventListener('click', function(e) {
        if(ele.nextSibling){
          document.querySelector(".tabs li.active").classList.remove("active");
          ele.classList.add("active");
        }
    });
});

或者使用伪类调整查询选择器，以选择除最后一项之外的所有元素:

document.querySelectorAll('.tabs li:not(:last-child)');