当我单击按钮时按钮消失

Question

当我单击button1时，我希望它消失并显示button2和button3。当我单击button3时，我希望它返回显示button1的页面。我试图基于此代码，但无法实现。请帮忙。

我的HTML：

<div class="buttons">
    <button id="button1" value="button">
        button1-t
    </button>

    <button id="button2" value="new tab" style="display: none;">
        button2-t
    </button>
</div>

我的JS：

$(function () {
    $('#button1').on('click', function () {
        $('#button2').show();
    });
});

Answer 1

我建议使用“隐藏”属性。

HTML代码

<div class="buttons">
    <button id="button1" value="button">
        button1-t
    </button>

    <button id="button2" value="new tab" hidden>
        button2-t
    </button>
</div>

JS代码

$(function () {
 $('#button1').on('click', function () {
    $('#button2').removeAttr("hidden");
    $("#button1").attr("hidden", true);
 });

 $('#button2').on('click', function () {
    $('#button1').removeAttr("hidden");
    $("#button2").attr("hidden", true);
 });
});