Bagaimana untuk Membetulkan Isu Jump Link Apabila Membina Tab jQuery dalam CMS Tersuai?

Membina Tab Ringkas dengan jQuery: Petua dan Penyelesaian Masalah

Apabila membina tab dengan jQuery, pengguna mungkin menghadapi masalah dengan pautan lompat tidak berfungsi apabila melaksanakan yang dipesan lebih dahulu CMS. Berikut menyediakan penyelesaian yang komprehensif untuk menyelesaikan dilema ini.

Kod Permulaan:

Pertimbangkan kod yang disediakan dalam biola. Bahagian jQuery adalah seperti berikut:

$('#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')) {
  $('#tabs li a').addClass('inactive');
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');
}

Penyelesaian Masalah dan Penyelesaian:

1. Masalah HR:
   Laman web mungkin menghadapi masalah dengan href, menyebabkan muat semula automatik apabila mengklik. Isu ini boleh diatasi dengan menggunakan id dan bukannya href.

2. Penanda HTML Dikemas Kini:
   Penanda HTML yang diubah suai:

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

   Salin selepas log masuk

3. jQuery yang dikemas kini:
   Bahagian jQuery yang dikemas kini:

   $('#tabs li a').click(function() {
     var t = $(this).attr('id');
   
     if ($(this).hasClass('inactive')) {
       $('#tabs li a').addClass('inactive');
       $(this).removeClass('inactive');
   
       $('.container').hide();
       $('#' + t + 'C').fadeIn('slow');
     }
   });

   Salin selepas log masuk

Pelaksanaan:

1. Masukkan penanda HTML dan jQuery yang dikemas kini ke dalam kod anda.
2. Pastikan ID #tabX dan ID #tabXC dalam HTML sepadan.
3. Uji kefungsian tab anda.

Dengan mengikut langkah-langkah ini, anda boleh mencipta tab mudah dan berfungsi dengan berkesan menggunakan jQuery, walaupun apabila menghadapi masalah dengan pautan lompat dalam CMS yang dipesan lebih dahulu.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Jump Link Apabila Membina Tab jQuery dalam CMS Tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!