文章/答案/技术大牛

发布

社区首页 >问答首页 >当我点击一个div时，我想隐藏所有其他div

问当我点击一个div时，我想隐藏所有其他div
EN

Stack Overflow用户

提问于 2019-05-27 19:13:46

回答 4查看 322关注 0票数 0

我正在制作一个软件，如果我需要隐藏所有其他div当我点击另一个div。现在发生的事情是，div只是互相叠加在一起。只有当我再次单击相同的div时，div才会消失。

我已经在这个平台上尝试了一些JavaScript和jQuery代码，但我自己也搞不清楚。

--这是IM用来显示和隐藏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>

--这是我的可点击区域，用户可以点击这里显示和隐藏一个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隐藏。

javascript

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-05-27 20:19:37

像那样吗？

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>

票数 0

Stack Overflow用户

发布于 2019-05-27 19:31:49

您需要先隐藏所有其他元素，然后才能显示您想要看到的元素。您可以将它们全部更改为具有class=“测试”，然后将以下内容添加到脚本中：

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>

票数 1

Stack Overflow用户

发布于 2019-05-27 19:28:08

使用jquery代码，当单击当前div时，jquery代码将用于隐藏所有其他div。

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

但是，您必须更改应用该代码的ids。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56331371

复制

相似问题

问当我点击一个div时，我想隐藏所有其他div
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我点击一个div时，我想隐藏所有其他divEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我点击一个div时，我想隐藏所有其他div
EN