Question

我有这些链接：

<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完成？

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

Answer 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>

Answer 3

如果是jQuery，我会像

那样做

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

单击链接时JavaScript添加类

3 个答案: