Показать скрыть div с активным состоянием

Question

Как я могу изменить этот код, чтобы кнопки изменились на активное. Это происходит с помощью toggleClass, но кнопка, которая ранее была активной, остается активной.

<script type="text/javascript"> 
jQuery(function(){ 
    jQuery('#showall').click(function(){ 
      jQuery('.targetDiv').hide(); 
    }); 
    jQuery('.showSingle').click(function(){ 
      jQuery('.targetDiv').hide(); 
      jQuery('#div'+$(this).toggleClass("greenactive"  
    ).attr('target')).show(); 
    }); 
}); 
</script> 

мой код кнопки

<ul class="choose"> 
<li><a class="showSingle" target="1">Email Order</a></li> 
<li><a class="showSingle" target="2">Order and Pay Now</a></li> 
</ul> 

дивы

<div id="div1" class="targetDiv" style="display:none"> 
content 
</div> 

<div id="div2" class="targetDiv" style="display:none"> 
content 
</div> 

стиль

a.greenactive {background:green} 

Answer 1

removeClass() использование перед тем addclass()

$('.showSingle').click(function() { 
 
    $('.targetDiv').hide(); 
 
    $('.showSingle').removeClass('greenactive'); 
 
    $(this).addClass("greenactive") 
 
    $('#div' + $(this).attr('target')).show(); 
 
});

a.greenactive { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="choose"> 
 
    <li> 
 
     <a class="showSingle" target="1">Email Order</a> 
 
    </li> 
 
    <li> 
 
     <a class="showSingle" target="2">Order and Pay Now</a> 
 
    </li> 
 
</ul> 
 
<div id="div1" class="targetDiv" style="display:none">content1</div> 
 
<div id="div2" class="targetDiv" style="display:none">content2</div>

Answer 2

Вам просто нужно позвонить removeClass() на всех .showSingle элементов перед переключив класс на тот, который вызвал событие:

$('.showSingle').removeClass('greenactive'); 

Working example