CMS でタブが正しく動作しないのはなぜですか?どうすれば修正できますか?-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-10-25 05:52:02

オリジナル

383 人が閲覧しました

Why are my tabs not working correctly in my CMS and how can I fix them?

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 サイトの他の関連記事を参照してください。