Mengapa Pautan Lompat Saya Tidak Berfungsi dalam Pelaksanaan Tab jQuery Saya?

Cara Membina Tab Ringkas dengan jQuery: Menyelesaikan Masalah Jump Link Isu

Isu yang dibentangkan berkaitan dengan pelaksanaan jQuery di mana pautan lompat tidak berfungsi seperti yang dijangkakan dalam CMS tertentu. Untuk menangani masalah ini, kami meneroka penyelesaian alternatif yang mengekalkan kefungsian dengan kehadiran JS.

Kod Disemak:

Kod jQuery yang dikemas kini adalah seperti berikut:

$('#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');
 }
});

Penanda Diubah Suai:

Penanda HTML juga telah disemak:

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

Penyelesaian:

Kod yang disemak ini menghapuskan isu dengan pautan lompat dengan menggunakan kaedah berbeza untuk mengendalikan acara klik. Atribut id bagi sauh () digunakan untuk menentukan div kandungan sasaran (dikenal pasti oleh atribut id yang berakhir dengan C). Ini membolehkan kandungan yang diingini ditunjukkan dengan lancar dengan dan tanpa JS didayakan.

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