點擊時顯示/隱藏按鈕

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