When I click on an anchor, I want it to add a specific class.
This is my current markup:
<ul>
<li>
<a href="<?php echo base_url()?>home/promos/call" class="promo-call"></a>
</li>
<li>
<a href="<?php echo base_url()?>home/promos/text" class="promo-text"></a>
</li>
<li>
<a href="<?php echo base_url()?>home/promos/data" class="promo-data"></a>
</li>
<li>
<a href="<?php echo base_url()?>home/promos/combo" class="promo-combo"></a>
</li>
<li>
<a href="<?php echo base_url()?>home/promos/recent" class="promo-recent"></a>
</li>
</ul>
For example, when clicking on class="promo-call", I want it to add class active-call. Similarly, clicking on promo-text should add class active-text.
Just to clarify my intention:
For instance, when promo-call is clicked:
<a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a>
When promo-text is clicked:
<a href="<?php echo base_url()?>home/promos/text" class="promo-text active-text"></a>
Similarly, for promo-data and others.
Additionally, when one anchor is active, the rest should return to their original class and be inactive.
Currently, my code looks like this:
It's still in the trial and error phase. I'm currently working on promo-call and promo-text only. A strange issue I'm facing is having to click the button twice for the background image to show.
jQuery(document).delegate(".promo-call","click",function(e){
jQuery(".promo-text").removeClass("active-text");
jQuery(".promo-call").addClass("active-call");
});
jQuery(document).delegate(".promo-text","click",function(e){
jQuery(".promo-text").addClass("active-text");
jQuery(".promo-call").removeClass("active-call");
});
Just to let you know, I'm using jQuery-Mobile.