jQuery タブの実装でジャンプ リンクが機能しないのはなぜですか?

jQuery を使用して単純なタブを作成する方法: ジャンプ リンクの問題のトラブルシューティング

提示された問題は、ジャンプ リンクが機能しない jQuery 実装に関連しています。特定の CMS 内で期待どおり。この問題に対処するために、JS の存在下で機能を維持する代替ソリューションを検討します。

改訂されたコード:

更新された jQuery コードは次のとおりです:

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

  if($(this).hasClass('inactive')){
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

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

変更されたマークアップ:

HTML マークアップも変更されました:

<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

解決策:

この改訂されたコードでは、クリック イベントを処理する別の方法を利用することにより、ジャンプ リンクの問題が解消されています。アンカー () の id 属性は、ターゲット コンテンツ div (C で終わる id 属性によって識別される) を決定するために使用されます。これにより、JS が有効な場合と無効な場合の両方で、目的のコンテンツをシームレスに表示できます。

以上がjQuery タブの実装でジャンプ リンクが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。