为什么我的 jQuery 选项卡在 CMS 中无法正常工作？

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

问题：您已经使用 jQuery 在网站上实现了选项卡，但它们不起作用正确地在定制的 CMS 中。如果没有 JavaScript，选项卡将充当跳转链接，但有了 JavaScript，选项卡内容不会显示。

提供的输入：

• HTML选项卡代码：

  <code class="html"><ul id="tabs">
  <li><a href="#tab1">test1</a></li>
  <li><a href="#tab2">test2</a></li>
  ...
  </ul>
  ...
  <div class="container" id="tab1">Some content</div>
  ...</code>

  登录后复制

• jQuery 代码：

  <code class="javascript">$('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  ...</code>

  登录后复制

修改后的解决方案：

提供的解决方案假设单击选项卡的 href 会重新加载网站。为了解决这个问题，href 属性已被删除，并且点击处理程序已被修改：

更新了 jQuery：

<code class="javascript">$('#tabs li a').click(function() {
  var t = $(this).attr('id');

  if ($(this).hasClass('inactive')) { // Start of the condition
    $('#tabs li a').addClass('inactive');
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#' + t + 'C').fadeIn('slow');
  }
});</code>

修订的 HTML 标记：

<code class="html"><ul id="tabs">
  <li><a id="tab1">test1</a></li>
  <li><a id="tab2">test2</a></li>
  ...
</ul>
...
<div class="container" id="tab1C">1Some content</div>
...</code>

通过这些更改，无论您单击启用或未启用 JavaScript 的选项卡，网站都会正确处理导航。

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