CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

jQuery Multi Tabs Script Not Working

This is the pen I'm working on but the the content of each tab do not update please check the jQuery I've coded below.

$('.content-canvas').find('div').hide();
$('.content-canvas div:first-child').show();
$('.tab-button span:first-child').addClass('active');
$('.tab-button').find('span').click(function(){
   $('.tab-button').find('span').removeClass('active');
   $(this).addClass('active');
   var currentclass=$('.active').attr('class');
   $('.content-canvas').find('div').each(function(){
      if($(this).attr('class')==currentclass) {
         $('.content-canvas').find('div').hide();
         $(this).show();
      }
      else {
         $(this).hide();
      }
   });
});

Upvotes: 0

Views: 97

Answers (1)

John Kurlak
John Kurlak

Reputation: 6680

The problem is that currentclass is being set to something like "content2 active" instead of "content2".

You can try using something like this:

var currentclass = $(this).attr('class');  
$(this).addClass('active');

See: http://codepen.io/anon/pen/qbAdG

This is why having a debugger is helpful. You can use a debugger to trace through the code and check the values of variables and the execution path to verify that everything is behaving as it should.

Upvotes: 2

Related Questions