Question

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

最初，button1将显示：block和button2将显示：none。

单击button1时，它会将button2切换为display：block，button1将显示为：none。

我知道这可能是如此简单，请原谅我缺乏知识。

Answer 1

如果你可以使用jquery，这很容易执行，你只需使用css(key, value)函数设置对象的css，例如： this jsfiddle

或者使用纯js：this jsfiddle

Answer 2

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

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

按照您的定义设置CSS：

#first  { display: block; }
#second { display: none;  }

JS来了。我们使用名为document.getElementById()的函数通过其ID访问这两个元素。这将返回具有指定ID的元素。

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

现在我们可以创建一个toggle函数。这是一个概念：如果第一个元素的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>

或者我们可以使用JS：

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

我更喜欢第二种，我们会坚持下去，

你有它。你可以在这里找到一个有效的例子 - http://jsfiddle.net/twEK5/

单击时显示/隐藏按钮

2 个答案: