如何使用 jQuery 建立簡單的選項卡？

在網站上建立分頁時，您可能會遇到跳轉連結在某些情況下不起作用的問題內容管理系統。這可能會導致選項卡式內容無法如預期顯示。要解決此問題，確保正確實作 HTML 和 jQuery 程式碼非常重要。

讓我們考慮以下 HTML 程式碼：

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

以及以下jQuery 程式碼：

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

在這種情況下，問題似乎出在錨標記的 href 屬性上。當使用者點擊選項卡時，href 屬性會使用跳躍連結將瀏覽器導向到頁面的特定部分。由於跳轉連結在您的 CMS 中不起作用，因此選項卡式內容無法正確顯示。

要解決此問題，我們可以更改 href 屬性以使用 ID 而不是部分名稱。此外，我們需要更新 jQuery 程式碼以使用 id 屬性顯示正確的選項卡內容。

以下是更新後的 HTML：

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

以及更新的jQuery:

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

透過使用ID並調整jQuery程式碼以使用id屬性，我們可以確保使用者點擊選項卡時顯示正確的選項卡內容，即使在停用跳轉連結的情況下也是如此。