Active & Inactive class add & remove

Question

I need to add & remove class on click of anchor tag.

 <div class="activeTab">
    <a href="#." class="active">Active</a>
    <a href="#.">Inactive</a>
</div>

Above div has two anchor tags & "Active" & "Inactive" one has a class 'active'. my requirement is need to remove that 'active' class on click of "Inactive" anchor tag & add the class 'active' to that clicked "Inactive" anchor and if I clicked on "Active" anchor again the class will remove form "Inactive" anchor & will add to the "Active" anchor. with jquery.

possible duplicate of [Jquery Add active class to main menu](http://stackoverflow.com/questions/14607480/jquery-add-active-class-to-main-menu) — Ram, May 14 '13 at 12:22
http://stackoverflow.com/questions/5883642/jquery-add-remove-class-based-on-selected-item-in-list — Ram, May 14 '13 at 12:23
http://stackoverflow.com/questions/2245934/jquery-add-remove-class — Ram, May 14 '13 at 12:24

Claudio Redi · Answer 1 · 2013-05-14T12:39:57.687

0

$('div.activeTab a').click(function(){
    var $this = $(this);
    $this.parent().find('a').removeClass('active');
    $this.addClass('active');
})

edited May 14 '13 at 12:39

answered May 14 '13 at 12:21

Claudio Redi

67,454
15
130
155

bipen · Answer 2 · 2013-05-14T13:00:31.187

0

try this

$('div.activeTab a').click(function () {
  var $this = $(this);
   $this.siblings().removeClass();
   if ($this.hasClass('active')) {
      $this.removeClass('active').addClass('inactive')
   } else {
      $this.removeClass('inactive').addClass('active');
  }

})

working fiddle here

edited May 14 '13 at 13:00

answered May 14 '13 at 12:25

bipen

36,319
9
49
62

on click inactive class is not added to the inactive anchor – MAR May 14 '13 at 13:32

score 0 · Accepted Answer · answered May 14 '13 at 14:40

If i undestood well...

I made a refork of an old lil snippet doing what you want (or what i guess you want) xDD

Sorry by my english, it's hard to me write on it.

HTML

<div class="container">

  <div class="activeTab">
      <a href="#." class="button_active">Active</a>
      <a href="#." class="button_inactive">Inactive</a>
  </div>

</div>

CSS

.activeTab { width:100%; padding:30px 0 20px 0; background:#fff; } 
.active { background: #f0f0f0; }

JS

$(function() { $( ".button_active" ).click(function() {

$( ".activeTab" ).addClass("active");

return false; }); });

$(function() { $( ".button_inactive" ).click(function() {

$( ".activeTab" ).removeClass("active");

return false; }); });

You can see a working demo on JSFiddle http://jsfiddle.net/aritz81/74bGe/1/

Active & Inactive class add & remove

3 Answers3