jquery - 複数のタブが Jquery で機能しない

Question

これは私が取り組んでいるペンで、Jquery は以下にあります。各ボタンが目的のコンテンツを表示するようなタブ スタイルが必要なためです。

Jクエリ

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