Question

我有4个列表项的无序列表。

当我单击一个列表项时，应删除其他项中的“活动”类别，并单击该项目。

-E

-r

问题是simlpy代码第一次没有执行，第二次单击后它可以正常工作。第一次单击后，function activeBool() { for (let i = 0; i < buttons.length; i++) { if (buttons[i].classList.contains("active")) { return i; } } } function change() { let current = activeBool(); buttons[current].classList.remove("active"); for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function() { this.classList.add("active"); }); } } for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", change); }不确定。

Answer 1

您附带的事件监听器没有任何意义。它第二次正常工作是因为您随后在change函数中添加了新的事件监听器。

我已经修改了您的代码，请参见下面的示例。

var buttons = Array.from(document.getElementById('menu').getElementsByTagName('li'));

function setActive(ev) {
  buttons.forEach(btn => btn.getElementsByTagName('a')[0].classList.remove('active'));
  ev.currentTarget.getElementsByTagName('a')[0].classList.add('active');
}

buttons.forEach(btn => btn.addEventListener('click', setActive));

.active {
  background-color: #ff0000;
}

<ul id="menu">
    <li><a href="javascript:void(0)" class="active">Wordpress</a></li>
    <li><a href="javascript:void(0)">Web Apps</a></li>
    <li><a href="javascript:void(0)">Ecommerce</a></li>
    <li><a href="javascript:void(0)">More</a></li>
</ul>

Answer 2

由于您的第一次点击会调用change，因此第一次无法使用。

尝试一下：

let buttons = document.querySelectorAll("ul li a");

function toggleClass(e) {
    removeActiveClassName(buttons);
    e.target.classList.add("active");
}

function removeActiveClassName(buttonList){
    buttonList.forEach((button) =>  button.classList.remove("active"));
}

window.addEventListener('load', ()=>
{
    buttons.forEach(function forEachButton(button, i){
        button.addEventListener("click", toggleClass);
        button.setAttribute("data-index", i); // In case you need the index later on
    });
});

ul{
  list-style: none;
}

a{
  display: block;
  width: 120px;
  height: 30px;
  padding: 0.5rem;
  background-color: whitesmoke;
  text-decoration: none;
  color: black;
}

a:hover{
  background-color: #e1e1e1;
}

.active {
  background-color: green;
  color: white;
}

<ul>
    <li><a href="javascript:void(0)" class="active">Wordpress</a></li>
    <li><a href="javascript:void(0)">Web Apps</a></li>
    <li><a href="javascript:void(0)">Ecommerce</a></li>
    <li><a href="javascript:void(0)">More</a></li>
</ul>

第一次单击后函数返回未定义

2 个答案: