CMS でタブが正しく動作しないのはなぜですか?どうすれば修正できますか?

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

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

次の HTML コードを考えてみましょう:

<code class="html"><ul id="tabs">
  <li><a href="#tab1">test1</a></li>
  <li><a href="#tab2">test2</a></li>
  <li><a href="#tab3">test3</a></li>
  <li><a href="#tab4">test4</a></li>
</ul>
<div class="container" id="tab1">Some content</div>
<div class="container" id="tab2">Some content</div>
<div class="container" id="tab3">Some content</div>
<div class="container" id="tab4">Some content</div></code>

そして次の jQuery コード:

<code class="javascript">$('#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');    
}</code>

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

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

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

<code class="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">Some content</div>
<div class="container" id="tab2C">Some content</div>
<div class="container" id="tab3C">Some content</div>
<div class="container" id="tab4C">Some content</div></code>

そして更新された jQuery:

<code class="javascript">$('#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');
 }
});</code>

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

以上がCMS でタブが正しく動作しないのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。