Question

I have this code below:

<li>
  <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-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>

What I want to do is when the user click the class promo-text it will append an active-text in the class property

E.g:

<a class="promo-text active-text></a>

and will add this css style: background:url(../images/call_icon_0.png) 0 -72px no-repeat!important;

Of course i need remove the active in the other class.

Answer 1

If you don’t mind using Javascript + Jquery + CSS, try the following.

First create a CSS Class like this –

.active-text
{
    background: url(../images/call_icon_0.png) 0 -72px no-repeat;
} 

Then use the following JQuery code –

$(document).ready(function()
{
    $("li a").click(function()
    {
        $("li a.active-text").removeClass("active-text");
        $(this).addClass("active-text");
    });
});

jsFiddle demo.

To add any specific CSS style to an element, use the css() function –

$(this).css("color", "red");

This will dynamically add color:red CSS style to the selected element. You can add any CSS rule in this way.