使用javascript更改班级

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在你的功能将不会是eleme nt被点击，因为你有事件处理程序挂钩的方式。你可以确保它是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

你需要传递的元素有关的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'; 
} 

Answer 4

有一对夫妇的你的代码有问题。

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 5

你有几个问题：

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()}