Mengapa Tab jQuery Saya Tidak Berfungsi dengan Baik dalam CMS Saya?

Cara Membina Tab Mudah dengan jQuery

Masalah: Anda telah melaksanakan tab di tapak web anda menggunakan jQuery, tetapi ia tidak berfungsi dengan betul dalam CMS yang dipesan lebih dahulu. Tanpa JavaScript, tab bertindak sebagai pautan lompat, tetapi dengannya, kandungan tab tidak dipaparkan.

Input yang Disediakan:

• HTML kod untuk tab:

  <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>

• kod jQuery:

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

Penyelesaian Diubah Suai:

Penyelesaian yang disediakan menganggap bahawa mengklik pada href tab memuatkan semula tapak web. Untuk menyelesaikan masalah ini, atribut href telah dialih keluar dan pengendali klik disemak:

JQuery yang dikemas kini:

<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>

Penanda HTML yang disemak:

<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>

Dengan perubahan ini, sama ada anda mengklik tab dengan atau tanpa JavaScript didayakan, tapak web akan mengendalikan navigasi dengan betul.

Atas ialah kandungan terperinci Mengapa Tab jQuery Saya Tidak Berfungsi dengan Baik dalam CMS Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!