如何使用 jQuery 切换选项卡，而不关闭相邻的选项卡。

Posted 2023-05-08

【中文标题】如何使用 jQuery 切换选项卡，而不关闭相邻的选项卡。

【英文标题】：How to Toggle Tabs with jQuery, without closing adjacent tabs.

【发布时间】：2012-05-06 17:18:43

【问题描述】：

很难弄清楚这一点。我在页面顶部有 3 个标签。在页面加载时，它们是隐藏的。每个选项卡都包含一段内容。我想单击选项卡 1 并显示选项卡 1 的内容，当我单击选项卡 2 时，我想显示选项卡 2 的内容等。但是，我还希望能够再次单击每个相应的选项卡以隐藏相关的内容。

所以我想要的效果是：点击标签1，显示标签1的内容，点击标签2，显示标签2的内容，再次点击标签2，隐藏标签2的内容。我已经包含了我当前使用的代码；这会正确隐藏选项卡，正确展开它们，但如果我以我想要的方式单击其锚元素，则不会切换每个选项卡。任何帮助是极大的赞赏。

$('.tabs').hide();
    $('ul.tabs li a').click(function () 
        $('.content').show();
);

【问题讨论】：

请发布标签的 html。

我提供了一张图片，希望对您有所帮助。生成的代码相当庞大，需要相当长的时间来修剪——我不想浪费你太多的时间。如果提供的图像不足，请告诉我。感谢您提供的所有帮助。

【参考方案1】：

在选项卡本身的单击事件中，您希望为后续单击执行类似操作，因此当单击活动选项卡时它会隐藏/显示：

if ( $(this).hasClass("ui-state-active") ) 
    $(this).toggle();

（此解决方案假定您使用的是 jQuery UI 选项卡。）

【讨论】：

这是假设他们已经加载了 jQuery ui 文件。

@JTSmith，如果选项卡一开始就可以工作，它们是否必须加载？

你怎么知道他在使用 jQuery UI 选项卡？

@Marc 不，您可以在不使用 jQuery ui 库的情况下切换、显示/隐藏任何元素。如果没有海报中的 html 代码示例，很难准确地说出他们使用的 什么

@JT Smith，我明白这一点。我想他可能正在使用来自不同图书馆的标签？我做了一个假设，并将其添加到我的解决方案中。

【参考方案2】：

在看到 HTML 之前我无法确定，但 $('.content').toggle(); 应该可以工作。

【讨论】：

尽管$('.content') 匹配具有该类名称的所有元素。请给我看 HTML。

【参考方案3】：

也可以使用.toggle()

$('.tabs').hide();
$('ul.tabs li a').click(function () 
    $('.content').toggle();
);

如果你的标签在页面加载时被隐藏，你应该把它放在 CSS display: none; 然后使用点击事件

$('ul.tabs li a').click(function () 
    $('.content').toggle();
);

如果在使用切换时仍有问题，请为每个选项卡创建一个唯一的 ID 并执行此操作。问题出在查询中：

$('ul.tabs li a').click(function() 
    $(this).toggle;
);

通过使用.content，您激活的是父元素而不是其子元素

【讨论】：

我已经尝试过使用切换，但不幸的是它比这更复杂 - 或者我假设。如果我单击选项卡 1 两次，切换可以显示和隐藏该选项卡，但是如果我单击选项卡 1 一次以显示它，然后单击选项卡 2，结果是它隐藏选项卡 1，而不是隐藏选项卡 1并显示选项卡 2。我希望这是有道理的。

这是因为.content 在每个选项卡中都是相同的类名。显示其中一个选项卡的 HTML，我们就能告诉您出了什么问题。

再次道歉。代码是由 Drupal 生成的，字符数相当多。通过在文本编辑器中查看它可以告诉您的是，每个选项卡确实有一个唯一的 ID——我可以进一步为其中包含的内容创建唯一的 ID。

看看那张代码图片，当你点击它时，你究竟在“打开”什么？我看那里没有子菜单。

如果我注意并实际拍摄了包含内容容器元素的完整代码块的照片，这可能会更有益...... postimage.org/image/gad9ypfu9 再次道歉！