个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在制作一个软件，当我点击另一个 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
我是一名优秀的程序员,十分优秀！