javascript - 显示/隐藏单击 div，期望：一次显示一个项目

Question

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

http://www.littlestoneacademy.com

Answer 1

首先尝试了解需求。需要在单击链接时显示一个块并隐藏其他块。只需为需要隐藏的对象和需要显示的对象使用document.getElementById并将style.display属性设置为。noneblock

有一个有点像这样的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 的内联事件处理程序，而只需使用这行代码，您的所有 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)
}