Bagaimana untuk membina tab mudah dengan jQuery?

Apabila membuat tab di tapak web, anda mungkin menghadapi masalah dengan pautan lompat yang tidak berfungsi dalam keadaan tertentu sistem CMS. Ini boleh menyebabkan kandungan tab tidak dipaparkan seperti yang diharapkan. Untuk menyelesaikan isu ini, adalah penting untuk memastikan bahawa kod HTML dan jQuery dilaksanakan dengan betul.

Mari pertimbangkan kod HTML berikut:

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

Dan kod jQuery berikut:

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

Dalam kes ini, isu ini nampaknya terletak pada atribut href bagi tag anchor. Apabila pengguna mengklik pada tab, atribut href mengarahkan penyemak imbas ke bahagian tertentu halaman menggunakan pautan lompat. Memandangkan pautan lompat tidak berfungsi dalam CMS anda, kandungan tab tidak dipaparkan dengan betul.

Untuk membetulkannya, kami boleh menukar atribut href untuk menggunakan ID dan bukannya nama bahagian. Selain itu, kami perlu mengemas kini kod jQuery untuk menggunakan atribut id untuk menunjukkan kandungan tab yang betul.

Berikut ialah HTML yang dikemas kini:

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

Dan jQuery yang dikemas kini:

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

Dengan menggunakan ID dan melaraskan kod jQuery untuk menggunakan atribut id, kami boleh memastikan kandungan tab yang betul dipaparkan apabila pengguna mengklik pada tab, walaupun apabila pautan lompat dilumpuhkan.

Atas ialah kandungan terperinci Mengapa tab saya tidak berfungsi dengan betul dalam CMS saya dan bagaimanakah saya boleh membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!