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

Question

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

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

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

于 2012-04-26T00:13:18.620 回答

score 0 · Accepted Answer

也可以使用.toggle()

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

如果您的选项卡在页面加载时隐藏，您应该将其放在 CSS 中，display: none;然后使用 click 事件

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

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

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

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

3 回答 3