CMS で jQuery タブが正しく動作しないのはなぜですか?

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

問題: jQuery を使用して Web サイトにタブを実装しましたが、機能しませんオーダーメイドの CMS 内で適切に実行できます。 JavaScript を使用しないとタブはジャンプ リンクとして機能しますが、JavaScript を使用するとタブ付きコンテンツは表示されません。

提供された入力:

• HTMLタブのコード:

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

  ログイン後にコピー

• jQuery コード:

  <code class="javascript">$('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  ...</code>

  ログイン後にコピー

修正された解決策:

提供されるソリューションは、タブの href をクリックすると Web サイトがリロードされることを前提としています。これを解決するために、href 属性が削除され、クリック ハンドラーが改訂されました:

更新された jQuery:

<code class="javascript">$('#tabs li a').click(function() {
  var t = $(this).attr('id');

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

    $('.container').hide();
    $('#' + t + 'C').fadeIn('slow');
  }
});</code>

改訂された HTML マークアップ:

<code class="html"><ul id="tabs">
  <li><a id="tab1">test1</a></li>
  <li><a id="tab2">test2</a></li>
  ...
</ul>
...
<div class="container" id="tab1C">1Some content</div>
...</code>

これらの変更により、JavaScript が有効になっているかどうかに関係なく、Web サイトでナビゲーションが正しく処理されるようになります。

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