用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);