Question

我有以下菜单，我想在最后点击的链接中添加一个“有效”类。使用原生javascript而不是JQuery。

首先，我从所有链接中删除活动，然后尝试将“活动”添加到点击链接

这是我正在尝试但却什么都不做的事情：

<a href="#" class="menu active" onclick="changeClass()">test 1</a>
<a href="#" class="menu" onclick="changeClass()">test 2</a>
<a href="#" class="menu" onclick="changeClass()">test 3</a>

function changeClass() {
  document.getElementsByClassName('menu').classList.remove('active');
  this.className('menu active');
}

Here's a fiddle to have a look at but not if jsfiddle is working correctly

Answer 1

className不是函数，所以这一行：

this.className('menu active');

会导致您在Web控制台中看到的错误。

当你在其他地方使用classList时，你可以这样做：

this.classList.add('active');

或者，完全覆盖类：

this.className = 'menu active';

（请注意，旧浏览器没有classList，因此对于它们，如果您依赖它，则需要垫片。）

另外，函数中的this将不是被点击的元素，因为您将事件处理程序连接起来的方式。您可以使用this确保call进行最小更改：

<a href="#" class="menu active" onclick="changeClass.call(this)">test 1</a>
<a href="#" class="menu" onclick="changeClass.call(this)">test 2</a>
<a href="#" class="menu" onclick="changeClass.call(this)">test 3</a>

您甚至可能想要传递事件：

<a href="#" class="menu active" onclick="changeClass.call(this, event)">test 1</a>
<a href="#" class="menu" onclick="changeClass.call(this, event)">test 2</a>
<a href="#" class="menu" onclick="changeClass.call(this, event)">test 3</a>

当然，或者使用现代技术来连接处理程序而不是属性。

Answer 2

className是一个属性，而不是一个方法，所以你应该像这样使用它：

this.className = 'menu active'

请注意，classList在IE10 +中工作，而不是在下面。

Answer 3

您的代码存在一些问题。

document.getElementsByClassName 不会返回单个元素，而是HTMLCollection，它基本上是一个包含其他属性的数组。这意味着您必须对其进行迭代才能从所有包含元素的类列表中删除“活动”。

var collection = document.getElementsByClassName("menu"),
    i;

for (i = 0; i < collection.length; i++) {
    collection[i].classList.remove("active");
}

this 不指向您点击的元素，但指向窗口对象。为了在函数中使用事件目标，您必须将其作为HTML代码中的参数传递，并在函数中使用此参数。

<a href="#" class="menu active" onclick="changeClass(this)">test 1</a>
...

function changeClass(target) {
    ...
    target.classList.add("active");
}

正如您在上面的代码中所看到的，您还可以使用Element.classList.add向元素添加类。如果在一种情况下使用classList，则应该在所有情况下都使用它。但是，较旧的浏览器不支持此功能。如果要编写向后兼容的代码，可以使用className属性。

collection[i].className = "menu"; // Removing the action class

target.className = "menu active"; // Adding the action class

Answer 4

你遇到了一些问题：

1。 document.getElementsByClassName()返回HTMLCollection，其中没有classList属性。您必须访问集合中的项目才能访问其属性，即：

document.getElementsByClassName('menu')[0].classList = "foo";

2。 Element.className是属性，而不是函数。您必须分配如下值：

this.className = 'menu active';

3。当您使用内联标记附加处理程序时，即：<a onclick="foo()">，this（在foo的上下文中）不是元素提出了这个事件;它是全局对象window。您可以考虑以编程方式（fiddle）附加这些处理程序：

function menuClickHandler(e) {
    // on click...
    // if the event target is already active, return
    if (this.classList.contains("active")) return;
    // if the event target is not already active...
    // get an element that has both menu and active classes
    // apparently only one item is active at any time
    var active = document.querySelector(".menu.active");
    // did we find an item? remove the active class
    active && active.classList.remove("active");
    // add the active class to the event target, "this"
    // which is actually the appropriate element now
    this.classList.add("active");
}
// iterate over all menu items
[...document.querySelectorAll(".menu")].forEach(item =>
    // add a click handler to each item
    item.addEventListener("click", menuClickHandler)
);

_{另请参阅：document.querySelector()，document.querySelectorAll()，Array.prototype.forEach()和EventTarget.addEventListener()}

Answer 5

您需要在onclick事件上传递元素，然后使用.className更改类

HTML代码

<a href="#" class="menu active" onclick="changeClass(this)">test 1</a>
<a href="#" class="menu" onclick="changeClass(this)">test 2</a>
<a href="#" class="menu" onclick="changeClass(this)">test 3</a>

JS代码

function changeClass(elm) {
  var elements = document.getElementsByClassName('active');
  elements[0].className = "menu";
  elm.className = 'menu active';
}

用javascript改变类

5 个答案: