Javascript 单击时显示/隐藏按钮

我想要两个按钮，当点击时，它们会反向显示或隐藏。（即，通过样式：display=none | block；）

最初，button1是display:block，button2是display:none

当您单击按钮1时，它会将按钮2切换为显示：块，将按钮1切换为显示：无

---

我知道这可能很简单，请原谅我缺乏知识

如果您同意使用jquery，那么这很容易执行，您可以简单地使用

css（key，value）

函数设置对象的css，例如

---

或者使用纯js:

首先，我们创建两个按钮。为他们提供id属性，以便我们有一个别名来访问他们：

<button id="first">Click</button> <button id="second">Second</button>

然后是JS。我们使用名为

document.getElementById（）

的函数通过两个元素的ID访问它们。这将返回具有指定ID的元素

var first = document.getElementById( 'first' ),
    second = document.getElementById( 'second' );

现在我们可以做一个

切换

函数。概念如下：如果第一个元素的

display

属性是“block”，那么我们将其更改为“none”，将后者更改为“block”。反之亦然。这是：

function toggle() {

    if ( first.style.display === "block" ) {

        first.style.display = "none";
        second.style.display = "block";

    } else { // switch back

        first.style.display = "block";
        second.style.display = "none";

    }

}

然后，我们在HTML中设置事件处理程序：

<button id="first" onclick="toggle();">First</button>
<button id="second" onclick="toggle();">Second</button>

我更喜欢第二个，我们会坚持的

---

就在这里。您可以在这里找到一个工作示例--

谢谢…您的回复和信息。非常感谢您为我分析的方式。这正是我需要的。易于理解和直截了当。谢谢你的时间和帮助。

<button id="first" onclick="toggle();">First</button>
<button id="second" onclick="toggle();">Second</button>

first.onclick = toggle;
second.onclick = toggle;