为什么我的选项卡在 CMS 中无法正常工作？如何修复它们？

如何使用 jQuery 构建简单的选项卡？

在网站上创建选项卡时，您可能会遇到跳转链接在某些情况下不起作用的问题内容管理系统。这可能会导致选项卡式内容无法按预期显示。要解决此问题，确保正确实现 HTML 和 jQuery 代码非常重要。

让我们考虑以下 HTML 代码：

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

以及以下 jQuery 代码：

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

在这种情况下，问题似乎出在锚标记的 href 属性上。当用户单击选项卡时，href 属性会使用跳转链接将浏览器定向到页面的特定部分。由于跳转链接在您的 CMS 中不起作用，因此选项卡式内容无法正确显示。

要解决此问题，我们可以更改 href 属性以使用 ID 而不是部分名称。此外，我们需要更新 jQuery 代码以使用 id 属性来显示正确的选项卡内容。

这是更新的 HTML：

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

更新的 jQuery：

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

通过使用 ID 并调整 jQuery 代码以使用 id 属性，我们可以确保用户单击选项卡时显示正确的选项卡内容，即使在禁用跳转链接的情况下也是如此。

以上是为什么我的选项卡在 CMS 中无法正常工作？如何修复它们？的详细内容。更多信息请关注PHP中文网其他相关文章！