Question

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

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

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

Answer 1

在标签本身的点击事件中，您希望为后续点击执行类似的操作，因此在单击ACTIVE选项卡时它将隐藏/显示：

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

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

Answer 2

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

Answer 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您正在激活父元素而不是其子元素