jQuery を使用して単純なタブを作成する方法

Web サイトでタブを作成するときに、特定の場所でジャンプ リンクが機能しないという問題が発生する場合があります。 CMS システム。これにより、タブ付きコンテンツが期待どおりに表示されなくなる可能性があります。この問題を解決するには、HTML と jQuery コードが正しく実装されていることを確認することが重要です。

次の HTML コードについて考えてみましょう:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

および次の jQuery コード:

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function() {
  var t = $(this).attr('href');
  $('#tabs li a').addClass('inactive');        
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');
  return false;
})

if($(this).hasClass('inactive')){ //this is the start of our condition 
  $('#tabs li a').addClass('inactive');         
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');    
}

この場合、問題はアンカー タグの href 属性にあるようです。ユーザーがタブをクリックすると、href 属性により、ジャンプ リンクを使用してブラウザがページの特定のセクションに移動します。 CMS でジャンプ リンクが機能していないため、タブ付きコンテンツが正しく表示されません。

これを修正するには、セクション名の代わりに ID を使用するように href 属性を変更します。さらに、正しいタブのコンテンツを表示するには id 属性を使用するように jQuery コードを更新する必要があります。

更新された HTML は次のとおりです:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

そして更新された jQuery:

$('#tabs li a').click(function() {
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'  t   'C').fadeIn('slow');
 }
});

ID を使用し、id 属性を使用するように jQuery コードを調整することで、ジャンプ リンクが無効になっている場合でも、ユーザーがタブをクリックしたときに正しいタブ コンテンツが表示されるようにすることができます。