显示/隐藏点击div，需要：一次显示一个项目

Question

我已经设置了显示/隐藏div与js，我很难弄清楚如何一次显示一个div。目前发生的情况是每个div显示，除非我再次单击原始链接关闭div。

http://www.littlestoneacademy.com

Answer 1

首先尝试了解需求。需要显示一个块并在点击链接时隐藏其他块。只需使用document.getElementById并将style.display属性设置为none以供需要隐藏的人使用，并将block设置为需要显示的人。

有一个JavaScript有点像这样（根据你的需求更改）：

<script type="text/javascript"> 
     function toggle(divName1,divName2,divName3){ 
      var div1=document.getElementById(""+divName1); 
      div1.style.display="block"; 
      var div2=document.getElementById(""+divName2); 
      div2.style.display="none"; 
      var div3=document.getElementById(""+divName3); 
      div3.style.display="none"; 
     } 
    </script> 

和HTML代码：

<a href="#" onclick="toggle('div1','div2','div3');">DIV 1</a><div id="div1" style="display:none">hello1</div><br/> 
<a href="#" onclick="toggle('div2','div1','div3');">DIV 2</a><div id="div2" style="display:none">hello2</div><br/> 
<a href="#" onclick="toggle('div3','div2','div1');">DIV 3</a><div id="div3" style="display:none">hello3</div><br/> 

Answer 2

你可以添加一些造型就像上面的例子：

<script type="text/javascript"> 
    function toggle(divName1,divName2,divName3){ 
     var div1=document.getElementById(""+divName1); 
     div1.style.display="block"; 
     var div2=document.getElementById(""+divName2); 
     div2.style.display="none"; 
     var div3=document.getElementById(""+divName3); 
     div3.style.display="none"; 
    } 
</script> 
<style type="text/css"> 
.divInfo { 
    display:none; 
    border:1px solid red; 
    height:200px; 
    width:200px; 
} 
</style> 

和html代码：

<table width=100%> 
    <tr> 
    <td> 
     <a href="#" onclick="toggle('div1','div2','div3');">DIV 1</a><br/> 
     <a href="#" onclick="toggle('div2','div1','div3');">DIV 2</a><br/> 
     <a href="#" onclick="toggle('div3','div2','div1');">DIV 3</a> 
    </td> 
    <td> 
     <div class="divInfo" id="div1">Div 1 Information</div> 
     <div class="divInfo" id="div2">Div 2 Information</div> 
     <div class="divInfo" id="div3">Div 3 Information</div> 
    </td> 
    </tr> 
</table> 

Answer 3

个人而言，我会摆脱所有内联事件处理程序是突兀的JavaScript和evertime你点击一个链接，只需使用下面这行代码，所有你的JavaScript是在一个地方和地点的文件

底部它将与DIV该链接关联，隐藏所有面板的孩子的div然后显示与您的链接与 相关的DIV只是删除所有内嵌的JavaScript事件处理程序

var x = document.getElementsByTagName('ul'); 
var panel = document.getElementById('panel'); 
var ul = document.getElementsByTagName('ul')[1] 
var lis = ul.children 
for (i=0; i<lis.length; i++) { 
lis[i].addEventListener('click', function (event) { 
    var toggleId = "toggle" 
    var id = event.target.id; 
    var cutID = id.slice(7); 
    toggleId = toggleId + cutID 
    var panelChildren = panel.children 
    for (j=0; j<panelChildren.length; j++) { 
     panelChildren[j].style.display = "none" 
    } 
    document.getElementById(toggleId).style.display = "block" 

}, false) 
}