点击时显示/隐藏按钮

Question

我想要两个按钮，点击时相反显示或隐藏。 （即，通过style：display = none | block;）。

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

当您点击button1时，它会将button2切换为显示：block和button1为display：none。

我知道这可能是很简单的事情，请原谅我缺乏知识。

Answer 1

首先，我们创建两个按钮。给他们的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/

Answer 2

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

或者纯JS：this jsfiddle