カスタム CMS で jQuery タブを構築する際のジャンプ リンクの問題を修正する方法

jQuery を使用したシンプルなタブの構築: ヒントとトラブルシューティング

jQuery を使用してタブを構築する場合、オーダーメイドの実装時にジャンプ リンクが誤動作するという問題が発生する可能性があります。 CMS。以下は、このジレンマを解決するための包括的な解決策を提供します。

初期コード:

フィドルで提供されるコードを検討してください。 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')) {
  $('#tabs li a').addClass('inactive');
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');
}

トラブルシューティングと解決策:

1. Href の問題:
   Web サイトは次のとおりです。 href で問題が発生し、クリック時に自動的にリロードが発生します。この問題は、href の代わりに id を使用することで解決できます。

2. 更新された HTML マークアップ:
   変更された 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>

3. 更新された jQuery:
   更新された 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');
     }
   });

実装:

1. 更新された HTML マークアップと jQuery をコードに組み込みます。
2. HTML 内の #tabX ID と #tabXC ID が対応していることを確認します。
3. タブの機能をテストします。

これらの手順に従うことで、オーダーメイド CMS のジャンプ リンクで問題が発生した場合でも、jQuery を使用してシンプルで機能的なタブを効果的に作成できます。

以上がカスタム CMS で jQuery タブを構築する際のジャンプ リンクの問題を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。