JavaScript Agregar clase cuando se hace clic Enlace

Question

tengo estos enlaces:

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

Cuando un enlace 2 se hace clic me gustaría recibir la clase de activo y eliminar la clase de enlace 1 en sí por lo que se convertiría efectivamente :

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

Esto debería funcionar en ambos sentidos. Es decir. cualquier enlace en el que se haga clic obtiene la clase y la elimina del otro.

¿Cómo se puede hacer esto con JavaScript/Prototype?

Answer 1

Se podría escribir un poco de función auxiliar con prototype apoyo que elimina la clase de todos los active elementos y lo agrega al que se hizo clic en:

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

Usted puede llamar a esta función desde sus eventos 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 2

Prueba esto:

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

Si se tratara de jQuery, lo haría como

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