JavaScript Ajouter une Classe Lorsque le Lien est Cliqué

J'ai ces liens:

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

Lorsqu'un lien 2 est cliqué, je tiens à recevoir les actifs de la classe et de supprimer la classe de lien 1 lui-même de sorte qu'il deviendrait effectivement:

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

Cela devrait fonctionner dans les deux sens. C'est à dire. quel que soit le lien est cliqué obtient la classe et le supprime de l'autre.

Comment est-ce possible avec JavaScript/Prototype?

OriginalL'auteur a1anm | 2010-01-10

  1. 3

    Vous pourriez écrire une petite fonction d'assistance avec prototype de soutien qui supprime la classe de tous les active éléments et l'ajoute à celle que l'on a cliqué sur:

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

    Que vous pouvez appeler cette fonction à partir de votre onclick événements:

    <a href="#sectiona" onclick="active(this)">a</a>
<a href="#sectionb" onclick="active(this)">b</a>
<a href="#sectionc" onclick="active(this)">c</a>
    Merci, cela fonctionne parfaitement

    OriginalL'auteur Josef Pfleger

  2. 7

    Essayez ceci:

    //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(" ");
        }
    }
}
    cela fera pour tous les liens dans la page? Je ne le veux le faire pour les 2 liens de la totalité de la page.
    Si vous remplacez document.links avec un tableau de vos deux A éléments, il ne fonctionne qu'avec deux éléments.

    OriginalL'auteur Gumbo

  3. 1

    Si c'était jQuery, je ne l'aime

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

    OriginalL'auteur naivists