jQuery Multi Tabs脚本不起作用

Question

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();
      }
   });
});

Answer 1

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.