单击链接时JavaScript添加类答案

【问题标题】：JavaScript Add Class When Link is Clicked单击链接时JavaScript添加类
【发布时间】：2011-01-03 11:54:23
【问题描述】：

我有这些链接：

<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 来做到这一点？

【问题讨论】：

标签： javascript

【解决方案1】：

试试这个：

// 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(" ");
        }
    }
}

【讨论】：

这会对页面中的所有链接执行此操作吗？我只希望它对整个页面中的 2 个链接执行此操作。
如果您将 document.links 替换为包含两个 A 元素的数组，则它仅适用于这两个元素。

【解决方案2】：

您可以编写一个带有prototype 支持的小辅助函数，从所有active 元素中删除该类并将其添加到被单击的元素中：

function active(e) {
    $$('.active').each(function(i) {
        i.removeClassName('active');
    });
    e.addClassName('active');
};

您可以从 onclick 事件中调用此函数：

<a href="#sectiona" onclick="active(this)">a</a>
<a href="#sectionb" onclick="active(this)">b</a>
<a href="#sectionc" onclick="active(this)">c</a>

【讨论】：

【解决方案3】：

如果是 jQuery，我会这样做

   $(document).ready(
     function(){
       $("a").click(function(){
         $("a").toggleClass("active");
       });
     }
   )

【讨论】：