Javascript Thêm Class Khi liên kết được nhấp

Question

Tôi có những liên kết này:

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

Khi một liên kết 2 được nhấp Tôi muốn nó để nhận lớp tích cực và loại bỏ các lớp từ liên kết 1 chính vì vậy nó có hiệu quả sẽ trở thành :

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

Điều này sẽ hoạt động theo cả hai cách. I E. bất kỳ liên kết nào được nhấp vào sẽ nhận được lớp và loại bỏ nó từ người khác.

Làm cách nào để thực hiện điều này bằng JavaScript/Prototype?

Answer 1

Bạn có thể viết một hàm helper nhỏ với prototype hỗ trợ mà loại bỏ các lớp từ khắp nơi active yếu tố và thêm nó vào cái đã được nhấp vào:

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

Bạn có thể gọi hàm này từ các sự kiện onclick của bạn:

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

Hãy thử điều này:

// 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 3

Nếu nó là jQuery, tôi sẽ làm điều đó như

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