我要在单击一个div时隐藏所有其他div

Question

I am making a software were i need to hide all other div's when i click on another div. 我正在制作一个软件，当我单击另一个div时我需要隐藏所有其他div。 what happens now is that the div's just stack on top of each other. 现在发生的是div只是彼此堆叠。 and the div only dissapears when i click the same div again. 而且只有当我再次单击相同的div时，div才会消失。

i already tried some of the JavaScript and jQuery code on this platform but can't quite figure it out myself. 我已经在该平台上尝试了一些JavaScript和jQuery代码，但我自己还不太清楚。

--- THIS IS THE SCRIPT IM USING TO SHOW AND HIDE THE DIV'S --- ---这是用于显示和隐藏Div的脚本IM-

 <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>

--- THESE ARE MY CLICKABLE AREA'S WHERE THE USER CAN CLICK ON TO SHOW AND HIDE A 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>

--- AND THESE ARE MY DIV'S CONTAINING THE INFORMATION IT HAS TO SHOW AND HIDE --- ---这是我的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>

I want the result to be that when I click one of the areas above, the corresponding div shows and all other divs hide. 我希望结果是当我单击上面的区域之一时，显示相应的div，而所有其他div隐藏。

Answer 1

You need to first hide all the other elements, so that then you can show the one you want to see. 您需要先隐藏所有其他元素，以便随后可以显示想要看到的元素。 You could change all of them to have the class="test" and then prepend to your script something like this: 您可以将它们全部更改为具有class =“ test”的名称，然后在脚本中添加以下内容：

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

UPDATE The full script would be something like this: 更新完整脚本将如下所示：

<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>

And the html: 和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>

Answer 2

use jquery code that will work for hiding all other div when you click on current div 使用可在您单击当前div时隐藏所有其他div的jquery代码

$('a').on('click', function(){
   var target = $(this).attr('vooglid');
   $("test"+target).show().siblings("div").hide();
});

but you must change your ids for apply that code 但您必须更改ID才能应用该代码

Answer 3

Do you already have tried adding all other div's to a CSS class? 您是否已经尝试过将所有其他div添加到CSS类中？

Try this code: 试试这个代码：

function toggle_visibility(var id){
    $("#vooglid").addClass("hide_div");
    $("#vooghoek").addClass("hide_div");
    $("#vwimpers").addClass("hide_div");
    $("#id").removeClass("hide_div");
});

CSS: CSS：

.hide_div{
    display: none;
}

I did this a few months ago and it worked fine. 几个月前我做了这个，并且效果很好。

Answer 4

Something like that ? 这样的事？

 const AlldivTest = document.querySelectorAll('.test'); document.querySelector('#Map').onclick =e=>{ if (!e.target.matches('area')) return; e.stopPropagation(); AlldivTest.forEach(d=>{ if (d.id===e.target.dataset.elm) { d.style.display = (d.style.display==='none') ? 'block' : 'none' } else { d.style.display = 'none' } }) }

 .test { display: none; border:1px solid grey; padding: 5px 10px } img { width:550px; height:550px }

 <div class="div-voog"> <img class="map" src="images/tekening-oog-vrouw-550px.jpg" alt="" usemap="#Map" /> <map name="Map" id="Map"> <area data-elm="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 data-elm="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 data-elm="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 data-elm="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 class="test" id="vooglid"> Symptoom ooglid</div> <div class="test" id="vwimpers"> Symptoom wimper</div> <div class="test" id="vwenkbrauw"> Symptoom wenkbrauw</div> <div class="test" id="vooghoek"> Symptoom ooghoek</div>

[edit] For a quick see of "my" part of code you have to use only one script and it should b: like this [编辑]要快速查看代码的“我的”部分，您只需使用一个脚本 ，它应该b：像这样

<script>
  $(function () {

    $('.map').maphilight({
      fade: false
    });

    $('.map').maphilight({
      fillColor: '008800'
    });

    $('#hilightlink')
    .mouseover(function (e) { $('#square2').mouseover(); })
    .mouseout(function (e)  { $('#square2').mouseout();  })
    .click(function (e)     { e.preventDefault();        });

    $('#linkerbeenlink')
    .click(function (e) {
      e.preventDefault();
      var data = $('#linkerbeen').data('maphilight') || {};
      data.neverOn = !data.neverOn;
      $('#linkerbeen').data('maphilight', data);
    });

    $('#linkerbeen,#linkerbeenlink2')
    .click(function (e) {
      e.preventDefault();
      var data = $('#linkerbeen').mouseout().data('maphilight') || {};
      data.alwaysOn = !data.alwaysOn;
      $('#linkerbeen').data('maphilight', data).trigger('alwaysOn.maphilight');
    });


    $('#vinger2link')
    .click(function (e) {
      e.preventDefault();
      var data = $('#vinger2').data('maphilight') || {};
      data.neverOn = !data.neverOn;
      $('#vinger2').data('maphilight', data);
    });

    $('#vinger2,#vinger2link2')
    .click(function (e) {
      e.preventDefault();
      var data = $('#vinger2').mouseout().data('maphilight') || {};
      data.alwaysOn = !data.alwaysOn;
      $('#vinger2').data('maphilight', data).trigger('alwaysOn.maphilight');
    });

    const AlldivTest = document.querySelectorAll('.test');

    document.querySelector('#Map').onclick =e=>{
      if (!e.target.matches('area')) return;

      e.stopPropagation();

      AlldivTest.forEach(d=>{
        if (d.id===e.target.dataset.elm)
          { d.style.display = (d.style.display==='none') ? 'block' : 'none' }
        else
          { d.style.display = 'none' }
      })
    }
  });
</script>

我要在单击一个div时隐藏所有其他div

问题描述

4 个解决方案

解决方案1
1 2019-05-27 19:31:49

解决方案2
0 2019-05-27 19:28:08

解决方案3
0 2019-05-27 19:53:10

解决方案4
0 已采纳 2019-05-27 20:19:37

我要在单击一个div时隐藏所有其他div

问题描述

4 个解决方案

解决方案1 1 2019-05-27 19:31:49

解决方案2 0 2019-05-27 19:28:08

解决方案3 0 2019-05-27 19:53:10

解决方案4 0 已采纳 2019-05-27 20:19:37

解决方案1
1 2019-05-27 19:31:49

解决方案2
0 2019-05-27 19:28:08

解决方案3
0 2019-05-27 19:53:10

解决方案4
0 已采纳 2019-05-27 20:19:37