Javascript 当我点击按钮时，它消失了

当我单击

button1

时，我希望它消失，并出现

button2

和

button3

。当我单击

按钮3

时，我希望它返回到显示

按钮1

的页面。我是根据这段代码尝试的，但我做不到。请帮忙

我的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>

---

我建议使用“隐藏”属性

HTML代码

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

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

---

您还可以使用“属性隐藏”，而不是使用内联style=“display:none；”。这使得代码更干净

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

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

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

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