CODEWITHSUNDEEP
javascriptjquery
wj R.
wj R.

Reputation: 359

How to set active class to multiple tabs in one page onclick?

I have multiple tabs in one page and having trouble in setting up an active class to the selected menu. It's working great if I only have one set of tab. If I click on the first tab menu, the 2nd tab menu will lose its active class. Also the fade in effect is not workin. Please help. thank you. Fiddle here.

$(".tabs a").click(function() {
  $(".tabs a").parent().removeClass("active");
  $(this).parent().addClass("active").fadeIn('slow');
});

Upvotes: 0

Views: 1684

Answers (2)

j08691
j08691

Reputation: 207861

Try this to fix the selection of the tabs:

$(".tabs a").click(function () {
    $(this).closest('ul').find('li').removeClass("active");
    $(this).parent().addClass("active").fadeIn('slow');
    $(this).closest('ul').next(".tabInner").find("div").eq($(this).parent().index()).hide().fadeIn('slow');
});

jsFiddle example

Upvotes: 1

Think Different
Think Different

Reputation: 2815

Do it like this 

$(".tabs a").click(function(e) {
   e.preventDefault();
   var p = $(this).closest('.tabs');
   var i = '#'+$(this).attr('data-tab');

   $(this).closest('ul').find('li').removeClass("active");
   $(this).parent().addClass('active');
   $(p).find('.tabInner div').hide();
   $(p).find(i).fadeIn('slow');
});

JFIDDLE EXAMPLE

Upvotes: 2

Related Questions