jquery - jQuery 选项卡无法使用 .hide() 和 .show()

Question

$('#tab-1').show();
$('#tab-2').hide();
$('#tab-2').click(function() {
    $('#tab-1').hide();
    $('#tab-2').show();
});

为什么这行不通？当我单击 id 为 tab-2 时，它会将 #tab-2 附加到 URL 但不显示内容。

Answer 1

您需要添加return false;到该单击方法，否则它将继续并尝试导航到页面上名为 #tab-2 的某个位置（# 字符最初是为了允许链接到同一 HTML 文档中的部分）

$('#tab-2').click(function() {
    $('#tab-1').hide();
    $('#tab-2').show();
    return false;
});

或者，您可以传递一个事件并使用 preventDefault()

$('#tab-2').click(function(e) {
    e.preventDefault();
    $('#tab-1').hide();
    $('#tab-2').show();
});

但是上面的评论仍然有效。如果你隐藏#tab-2，你怎么能点击它？您的 HTML 中有错字吗？