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

【问题标题】：How to Toggle Tabs with jQuery, without closing adjacent tabs.如何使用 jQuery 切换选项卡，而不关闭相邻的选项卡。
【发布时间】：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();
});

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 再次道歉！