Question

我在<li>中有一个<ul>标签列表，我有一个javascript函数，在点击时将'active'类添加到其中一个，并将其从兄弟姐妹中删除，我想实现这除了最后一个<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");
        }
    });
});

或使用pseudo-class调整查询选择器，以便选择除最后一项之外的所有项目：

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

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

1 个答案: