Hinzufügen einer Klasse auf Klick von Anchor-Tag

Question

Lets sagen, dass ich den folgenden HTML haben ...

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

Wenn ein Link 2 geklickt Ich mag es würde die aktive Klasse und entfernen Sie die Klasse von Link 1 erhalten selbst, so würde es effektiv werden:

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

Dies sollte in beide Richtungen funktionieren. Ie. Auf welche Verknüpfung auch geklickt wird, ruft die Klasse auf und entfernt sie von der anderen.

Wie kann dies mit jQuery gemacht werden? Vielen Dank im Voraus!

Answer 1

Bearbeiten: hinzugefügt jsfiddle

http://jsfiddle.net/LJ6L5/

Answer 2

Verwenden Sie einfach: addClass und removeClass

Aber erste Grenze Ihre aktivierbare Verbindungen mit der zweiten Klasse ('aktivierbare') nicht anderen Links auf Seite beeinflussen:

$("a.activable").click(function(){ 
    $("a.activable.active").removeClass("active"); 
    $(this).addClass("active"); 
}); 

Mit HTML:

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

Answer 3

HTML:

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

JS:

var ref = $("a.myrefclass"); 
$(ref).bind('click', function() { 

    if (!$(this).hasClass("active")) { 

     $(ref).removeClass("active"); 
     $(this).addClass("active); 
    } 

}); 

JS II (für einen Kommentar):

var ref = $("a.myrefclass"); 
$(ref).bind('click', function(ev) { 

    if (!$(this).hasClass("active")) { 
     ev.stopPropagation(); 
     return false; 
    } 

    $(ref).removeClass("active"); 
    $(this).addClass("active); 

});