如何使用 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属性，我们可以确保用户点击选项卡时显示正确的选项卡内容，即使在禁用跳转链接的情况下也是如此。