Question

我有三个菜单项，并希望在单击时添加一个活动类，即组中的特定li（ul）。

我已经设法做了一个，但我正在努力让它为每个人工作。

JavaScript

var selector, elems, makeActive;

selector = '.nav li';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.remove('active');

    this.classList.add('active');
};

for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);

提前致谢。

Answer 1

您需要迭代每个.nav并执行与之前li .nav内所做的相同的操作。

 // get all .nav  and convert into array, for latest
// browser use Array.from method
[].slice.call(document.querySelectorAll('.nav'))
// iterate over .nav elements
.forEach(function(ele) {
  // get all li within it
  var elems = ele.querySelectorAll('li');

  // define the function for updating
  var makeActive = function() {
    for (var i = 0; i < elems.length; i++)
      elems[i].classList.remove('active');
    this.classList.add('active');
  };

  // bind listener
  for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);
});

＆＃13;

[].slice.call(document.querySelectorAll('.nav')).forEach(function(ele) {
  var elems = ele.querySelectorAll('li');

  var makeActive = function() {
    for (var i = 0; i < elems.length; i++)
      elems[i].classList.remove('active');
    this.classList.add('active');
  };

  for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);
});

＆＃13;

li.active {
  color: red;
}

＆＃13;

<ul class="nav">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul class="nav">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul class="nav">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

＆＃13;

如何在多个“ul”元素上的特定“li”上添加活动类

1 个答案: