用javascript隱藏/顯示元素

Question

我試圖尋找答案，但還沒有找到合適的答案。我必須用JavaScript來做到這一點，所以不要給我任何jQuery的答案。我的JavaScript技能也很低，因爲我剛開始學習它。

這是我必須做的： 我有三個按鈕，每個按鈕都有自己的內容，在一個div內（所以有三個不同的div）。第一次加載網站時，我只能看到第一個按鈕的內容。如果我點擊另一個按鈕，我只會看到這個新按鈕的內容，其他所有內容都必須消失（當然除了三個按鈕）。

我試圖在功能等內使用document.getElementById("button1").style.visibility = "hidden";，但我仍然不能真正讓它工作，特別是當我嘗試將函數連接到HTML文檔。

任何提示？

Answer 1

希望下面的這些幫助

<button onclick="javascript:show(1)">One</button> 
<button onclick="javascript:show(2)">Two</button> 
<button onclick="javascript:show(3)">Three</button> 

<div id="content1">content one</div> 
<div id="content2" style="display:none">content two</div> 
<div id="content3" style="display:none">content three</div> 

<script> 
function show(dv){ 
    hideAll(); 
    if(dv == '1'){ 
      document.getElementById("content1").style.display = "block"; 
    }else if(dv == '2'){ 
       document.getElementById("content2").style.display = "block"; 
    }else{ 
     document.getElementById("content3").style.display = "block"; 
    } 
} 

function hideAll(){ 
    document.getElementById("content1").style.display = "none"; 
    document.getElementById("content2").style.display = "none"; 
    document.getElementById("content3").style.display = "none"; 
} 

</script> 

Answer 2

的幾個注意事項：

• 你需要觀察的click事件上任何需要點擊
• 點擊時，就可以判斷應該顯示哪些股利。 visibility: hidden或display: none
• 確保html元素已加載後，JavaScript是執行，否則將無法分配單擊處理等

Answer 3

下面是用普通的JavaScript做到這一點的一種方法，它使用的通用代碼每個按鈕，在你的HTML和數據沒有JavaScript的屬性：

HTML：

<div id="buttonContainer"> 
<button data-content="content1">Content 1</button> 
<button data-content="content2">Content 2</button> 
<button data-content="content3">Content 3</button> 
</div> 

<div id="contentContainer"> 
<div id="content1">Showing Content 1</div> 
<div id="content2">Showing Content 2</div> 
<div id="content3">Showing Content 3</div> 
</div> 

的Javascript：

var buttons = document.querySelectorAll("#buttonContainer button"); 

for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener("click", function() { 
     var contentItem = this.getAttribute("data-content"); 
     var contents = document.querySelectorAll("#contentContainer div"); 
     for (var j = 0; j < contents.length; j++) { 
      contents[j].style.display = "none"; 
     } 
     document.getElementById(contentItem).style.display = "block"; 
    }); 
} 

工作演示：http://jsfiddle.net/jfriend00/rcDXX/

說明：

1. 創建一個包含按鈕的股利。
2. 創建一個包含各種內容區域的div。
3. 創建顯示/隱藏適當的開始狀態的內容的CSS規則。
4. 在每個按鈕上放置一個數據屬性，告訴您應該顯示哪個內容區域，以便您可以對所有按鈕使用通用代碼。
5. 獲取所有按鈕到nodeList中。
6. 在每個按鈕上設置單擊事件處理程序。
7. 在該點擊處理程序中，獲取應爲該按鈕顯示的內容標識。
8. 將其樣式設置爲style.display = "none"
9. 隱藏所有內容區域顯示所需的內容區域。

僅供參考，下面是一個使用一個輔助函數的代碼更先進一點的版本：http://jsfiddle.net/jfriend00/aqMLt/

Answer 4

只是做了它的jsfiddle http://jsfiddle.net/6EGT2/。 首先創建一個函數來顯示和隱藏的div

function hideDiv(divid) 
{ 
    document.getElementById(divid).style.visibility= 'hidden'; 
} 

function showDiv(divid) 
{ 
    hideDiv('div1'); 
    hideDiv('div2'); 
    hideDiv('div3'); 
    document.getElementById(divid).style.visibility = ''; 
} 

現在的html：

<input type='button' value ='button1' onclick='showDiv("div1")'> 
<input type='button' value ='button2' onclick='showDiv("div2")'> 
<input type='button' value ='button3' onclick='showDiv("div3")'> 

<div id='div1'>content 1</div> 
<div id='div2'>content 2</div> 
<div id='div3'>content 3</div> 

Answer 5

好像你撥動按鈕的可見性而不是內容。你的內容div的ID是什麼？

提供：

<div id="containerDiv"> 
    <div id="div1">blahblah</div> 
    <div id="div2">blahblah</div> 
    <div id="div3">blahblah</div> 
</div> 

然後，只需設置按鈕去像 「toggleVisibility」 的功能。我測試了這一點，它將在IE 5.5及更高版本，Firefox，Chrome 1.0和Safari上運行。

function toggleVisibility(id){ 

    var containerDiv = document.getElementById("containerDiv"); 
    var innerDivs = containerDiv.getElementsByTagName("DIV"); 

    for(var i=0; i<innerDivs.length; i++) 
    { 
     if (i == id){ 
      innerDivs[i].style.visibility = "visible"; 
      innerDivs[i].style.display = ""; 
     } 
     else{ 
      innerDivs[i].style.visibility = "hidden"; 
      innerDivs[i].style.display = "none";   
     } 
    } 
} 

toggleVisibility(0);