个人中心
gpt4 book ai didi

javascript - 我想在单击一个 div 时隐藏所有其他 div

转载 作者：太空宇宙 更新时间：2023-11-04 06:12:09 25 4
gpt4 key购买 nike

我正在制作一个软件，当我点击另一个 div 时我需要隐藏所有其他 div。现在发生的是 div 只是堆叠在彼此之上。只有当我再次单击同一个 div 时，div 才会消失。

我已经在这个平台上尝试了一些 JavaScript 和 jQuery 代码，但我自己不太明白。

--- 这是我用来显示和隐藏 DIV 的脚本 ---

 <script type="text/javascript">
        function toggle_visibility(id) {
            var e = document.getElementById(id);
            if(e.style.display == 'block')
                e.style.display = 'none';
            else
                e.style.display = 'block';
        }
    </script>

</head>
<body>

--- 这些是我的可点击区域，用户可以点击这些区域来显示和隐藏 DIV ---

 <div class="div-voog" id=""> <img class="map" src="images/tekening-oog-vrouw-550px.jpg" alt="" usemap="#Map" />
        <map name="Map" id="Map">




     <area onclick="toggle_visibility('vooglid');" alt="" title="" href="#" shape="poly" coords=170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
        <area onclick="toggle_visibility('vwimpers');" alt="" title="" href="#" shape="poly" coords="170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
        <area onclick="toggle_visibility('vwenkbrauw');" alt="" title="" href="#" shape="poly" coords="43,157,62,120,84,103,114,85,132,75,151,65,191,47,204,38,232,31,268,31,298,31,317,31,339,33,365,42,390,47,408,51,429,59,445,61,467,69,484,74,501,85,504,127,498,141,494,146,471,136,446,123,432,119,412,113,396,108,376,100,362,96,354,93,334,90,321,90,308,89,295,87,271,83,260,81,232,75,218,74,207,73,192,73,181,76,150,95,122,109,102,118,78,138,62,149,54,158,49,163,47,167" />
        <area onclick="toggle_visibility('vooghoek');" alt="" title="" href="#" shape="poly" coords="388,275,396,270,401,270,407,266,408,263,411,258,420,263,425,269,428,273,432,278,435,280,434,282,434,285,422,284,414,279" />

    </map>
</div>

--- 这些是我的 DIV，其中包含它必须显示和隐藏的信息 ---

<div class="test" id="vooglid"> Symptoom ooglid</div>
<div class="test22" id="vwimpers"> Symptoom wimper</div>
<div class="test33" id="vwenkbrauw"> Symptoom wenkbrauw</div>
<div class="test44" id="vooghoek"> Symptoom ooghoek</div>

</body>
</html>

我希望的结果是，当我单击上面的某个区域时，相应的 div 会显示，而所有其他 div 会隐藏。

最佳答案

您需要先隐藏所有其他元素，然后才能显示您想要看到的元素。您可以将它们全部更改为具有 class="test"，然后像这样在您的脚本之前添加:

var tests = document.getElementsByClassName("test");
for (i = 0; i < tests.length; i++) {
  tests[i].style.display = "none";
}

更新完整的脚本应该是这样的:

<script>
  function toggle_visibility(el) {
    var tests = document.getElementsByClassName("test");
    for (i = 0; i < tests.length; i++) {
      tests[i].style.display = "none";
    } 
    el.style.display = "block";
  }
</script>

和 html:

<div>
  <area class="test" onclick="toggle_visibility(this)">A</div>
  <area class="test" onclick="toggle_visibility(this)">B</div>
  <area class="test" onclick="toggle_visibility(this)">C</div>
  <area class="test" onclick="toggle_visibility(this)">D</div>
</div>

关于javascript - 我想在单击一个 div 时隐藏所有其他 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56331371/

25 4 0
文章推荐： python - 我应该使用什么 python 模块来编辑 word 文档然后将其转换为 pdf？
文章推荐： Java:类似 Javascript 的分割行为
文章推荐： python - 如何在 Web2Py 中获取 url 字符串参数？
文章推荐： java - BlockingQueue 阻止并返回对象，直到具有指定 id 的对象在队列中可用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com