はそれが<a>

Question

同じだ場合、私は

$('h2 a').on('click', function(){ 
    $('h2 a.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

を変更しようとしています、私はアコーディオンをした後、クラスを削除「を選択」のクラスを与える、最初のタブは、クラスselectedを持っています。だから別のタブをクリックすると、最初のタブからselectedクラスが削除され、クリックしたものがselectedになります。開いたタブをクリックすると、selectedが削除されます。

Answer 1

あなたは.is()、.filter()

var h2 = $("h2 a"); 
 

 
h2.on("click", function() { 
 
    if ($(this).is(".selected")) { 
 
    $(this).removeClass("selected"); 
 
    } else { 
 
    h2.removeClass("selected") 
 
     .filter(this).addClass("selected") 
 
    } 
 
});

.selected { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<h2> 
 
<a>a</a> 
 
<a>b</a> 
 
<a>c</a> 
 
</h2>

Answer 2

を使用することができますが、答えは下にチェックし、それが他のH2のタグでは動作しないので、H2タグで1つのクラスを追加してくださいすることができます。いずれかをクリックすると、 "が選択された"クラスが削除され、現在の要素には "selected"クラスが追加されます。

HTML：

<h2 class="headerTitle"> 
    <a href="javascript:void(0)">Headeing1</a> 
    <a href="javascript:void(0)">Headeing2</a> 
    <a href="javascript:void(0)">Headeing3</a> 
</h2> 

のjQuery：

<script type="text/javascript"> 
    jQuery('.headerTitle a').on('click', function(){ 
     jQuery('.headerTitle a').removeClass('selected'); 
     jQuery(this).addClass('selected'); 
    }); 
</script> 

CSS：

<style type="text/css"> 
    .selected{ color: red; } 
</style>