Question

我已经用js设置了show / hide div，我很难弄清楚如何一次显示一个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，并且只使用这行代码，其中所有的javascript都在一个地方并放在文档的底部

evertime你点击一个链接，它会将该链接与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)
}

显示/隐藏单击div，所需：一次显示一个项目

3 个答案: