Question

我正在制作一个软件，当我单击另一个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 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隐藏。

Answer 1

您需要首先隐藏所有其他元素，以便随后可以显示要查看的元素。您可以将它们全部更改为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>

Answer 2

使用可在您单击当前div时隐藏所有其他div的jquery代码

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

但是您必须更改ID才能应用该代码

Answer 3

您是否已经尝试过将所有其他div添加到CSS类中？

尝试以下代码：

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

CSS：

.hide_div{
    display: none;
}

几个月前我做到了，而且效果很好。

Answer 4

类似的东西吗？

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>

[编辑] 要快速查看代码的“我的”部分，您只需使用一个脚本，它应该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 个答案: