wie Klasse hinzufügen oder entfernen von HTML-Elementen mit jQuery

Question

Ich habe versucht, Klasse auf eine aktuelle <a></a> hinzufügen und wollte diese aktive Klasse aus anderen <a></a> entfernen. Ich war in Ihrem Code

MY FIDDLE

HTML

<ul> 
    <li> 
    <a href="#" class="active"> 
    Home 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
    About 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
    Service 
    </a> 
    </li> 
</ul> 

jQuery

$('ul li a').click(function(e){ 
e.preventDefault(); 
$(this).addClass('active').siblings().removeClass('active'); 
}); 

Answer 1

$('ul li a').click(function(e){ 
 
e.preventDefault(); 
 
    $('ul li a').removeClass('active') 
 
$(this).addClass('active'); 
 
});

.active{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#" class="active"> 
 
    Home 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    About 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    Service 
 
    </a> 
 
    </li> 
 
</ul> 
 
jQuery

Sie alle aktiven Klasse von Anker entfernen können dann die aktive Klasse in den angeklickt Anker

Answer 2

a Element versucht hat keine Geschwister in Mutter li

Verwenden $('ul li a.active') Selektor und remov e alle active Klassen und gelten dann active Klasse über aktuelle Element

$('ul li a').click(function(e) { 
 
    e.preventDefault(); 
 
    $('ul li a.active').removeClass('active') 
 
    $(this).addClass('active'); 
 
});

.active { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#" class="active"> 
 
    Home 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    About 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
    Service 
 
    </a> 
 
    </li> 
 
</ul>

Answer 3

Sie müssen die a-Tag-Elemente finden, die nicht die direkten Geschwister sind, sondern die untergeordneten Elemente der aktuellen übergeordneten Elemente eines Tag-Elements.

den Code unten verwenden, um die ein Tag Elemente die die Kinder des angeklickten eines Tags geordneten Elements li Geschwister

$(this).addClass('active').parent("li").siblings("li").children("a").removeClass('active'); 

aktualisiert Geige zu finden sind: https://jsfiddle.net/Lwzu738a/1/