CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
Wondering Coder
Wondering Coder

Reputation: 1702

how to addClass and removeClass in an anchor

What I want is when I click an anchor it will add a class.

My 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>

Say If I clicked the class="promo-call" it will add class active-call and when I clicked promo-text, it will add class active-text.

Just to be clear on what's on my mind:

E.g: When clicked promo-call

<a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a>

When clicked promo-text

<a href="<?php echo base_url()?>home/promos/text" class="promo-text active-text"></a>

When clicked promo-data

<a href="<?php echo base_url()?>home/promos/data" class="promo-text active-data"></a>

And so on...

Also when an anchor is active the rest must be inactive, will return to their original class.

I have this code right now: Just a trial and error. For now I'm just playing the two anchor: class: promo-call & promo-text. What's odd is I have to click twice the button 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");
});

FYI: I'm using Jquery-Mobile.

Upvotes: 1

Views: 489

Answers (3)

Chris Dixon
Chris Dixon

Reputation: 9167

$('a[class^="promo"]').on('click', function() {

   $.each('a[class^="promo"]', function() {
       $(this).attr('class','');
   });

   var currentClass = $(this).attr('class');

   if(currentClass)
   {
       var startClass = string.split('-');

       if(startClass.length > 1)
       { 
          $(this).toggleClass('active-' + startClass[1]);
       }
   }
});

Note that this will only work for single-classed elements as in your example.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

try this: 

var promobtt = $('a[class^="promo"]');

promobtt.on('click', function(evt) {   
    evt.preventDefault();
    promobtt.removeClass('active-text active-data active-call ...');
    $(this).addClass(this.className.replace(/^promo/, "active"));
});

Note that here promobtt.removeClass('active-text active-data active-call ...'); you have to list all active classes you need to use.

Otherwise you should provide one unique "active" class (e.g. active) instead of <n> different active classes: if you're doing this only for a matter of styling you could style you links anyway with one class doing like so.

.promo-text { ... }
.promo-text.active { ... }

.promo-data { ... }
.promo-data.active { ... }

and so on. This would simplify both css code and javascript code because following this way you would only need a toggleClass('.active') applied to all links.

Upvotes: 1

Frederiek
Frederiek

Reputation: 1613

With .toggleClass("promo-call") you can get this result

Upvotes: 0

Related Questions