单击链接时的 JavaScript 添加类

标签 javascript

我有这些链接:

<a class="active" href="#section1">Link 1</a> 
<a href="#section2">Link 2</a>

当单击链接 2 时,我希望它接收事件类并从链接 1 本身中删除该类,以便它有效地变为:

<a href="#section1">Link 1</a> 
<a class="active" href="#section2">Link 2</a>

这应该是双向的。 IE。单击任何链接都会获取该类并将其从另一个链接中删除。

这如何用 JavaScript/Prototype 完成?

最佳答案

试试这个:

// initialization
var links = document.links;
for (var i=0; i<links.length; ++i) {
    links[i].onclick = function() {
        setActive(links, this);
    };
}

function setActive(links, activeLink) {
    for (var i=0; i<links.length; ++i) {
        var currentLink = links[i];
        if (currentLink === activeLink) {
            currentLink.className += " active";
        } else {
            currentLink.className = currentLink.className.split(/\s+/).map(function(val) {
                return val === "active" ? "" : val;
            }).join(" ");
        }
    }
}

关于单击链接时的 JavaScript 添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2037501/

相关文章:

javascript - 如何使用 Ranorex 以编程方式检查 ng-model 绑定(bind)输入字段的值?

javascript - 可访问性 javascript : make down up arrow keys simulate TAB key

javascript - 删除一个 div 时单页上多个 HighChart 的行为

javascript - jQuery 事件处理程序闭包与上下文

javascript - 滚动到 Vue 中模式窗口的底部

javascript - 将多个数组 .map 合并为一个

javascript - 如何根据类名和同级更改特定表格单元格的文本?

javascript - Protractor + Angular 误差 - 元素在点处不可点击

php - 按 ID 更改选定的下拉列表

javascript - 如何在不捆绑的情况下将为 AMD 编写的代码重写/重新打包为 CommonJs?