jquery - jQuery タブが .hide() および .show() で機能しない

Question

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

なぜこれがうまくいかないのですか？tab-2 の ID をクリックすると、URL に #tab-2 が追加されますが、コンテンツは表示されません。

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 にタイプミスはありませんか?