Javascript出现/消失对象

Question

我正在进行一个项目。当你点击一个项目时，出现下面的信息，我想知道如何在没有重新点击相同的项目时点击下一个项目使其消失....例如，我的项目中有比萨饼，我想点击肉比萨看到浇头，然后点击奶酪比萨看到浇头和肉浇头消失。

这里是我的html代码....

<table align="center"> 
<tr> 
<td><fieldset style="border:1px solid red;padding:5px; 
margin-bottom:10px;width:200px; height:150px"> 
<a onclick ="javascript:ShowHide('HiddenDiv')" href="#Meat">Meat Pizza</a> 

</fieldset></td> 

<td><fieldset style="border:1px solid red;padding:5px; 
margin-bottom:10px; width:200px; height:150px"> 
<a onclick ="javascript:ShowHide('HiddenDiv2')" href="#Cheese"> 
Cheese Pizza</a> 

</fieldset></td> 

<td><fieldset style="border:1px solid red;padding:5px; 
margin-bottom:10px; width:200px; height:150px;"> 
<a onclick ="javascript:ShowHide('HiddenDiv3')" href="#Veggie"> 
Veggie Pizza</a> 

</fieldset></td> 
</tr> 
</table> 

<div class="mid" id="HiddenDiv" style="DISPLAY: none" align="center"> 
<a name="Meat"> 
<table> 
<tr><td width="220">Meat Toppings</td></tr> 

</table> 

</a> 
</div> 

<div class="mid" id="HiddenDiv2" style="DISPLAY: none" align="center"> 
<a name="Cheese"> 
<table> 
<tr><td width="220">Cheese Toppings</td></tr> 

</table> 
</a> 
</div> 

<div class="mid" id="HiddenDiv3" style="DISPLAY: none" align="center"> 
<a name="Veggie"> 
<table> 
<tr><td width="220">Veggie Toppings</td></tr> 
</table> 
</a> 
</div> 

这里是我的javascript ......

function ShowHide(divId) 
{ 
if(document.getElementById(divId).style.display == 'none') 
{ 
document.getElementById(divId).style.display='block'; 
} 
else 
{ 
document.getElementById(divId).style.display = 'none'; 
} 
} 


function showApp(a) { 
var aside = document.getElementById('aside'); 
var arr = aside.getElementsByTagName('span'); 
for (i = 0; i < arr.length; i++) { 
    if (arr[i].getAttribute('id') != a) { 
     arr[i].style.visibility = 'hidden'; 
    } 
} 
x = document.getElementById(a); 
var state; 
if (x.style.visibility == 'visible') { 
    state = 'hidden'; 
} 
else { 
    state = 'visible'; 
} 
x.style.visibility = state; 
} 

Answer 1

在ShowHide()功能添加for循环是这样的：

已更新

ShowHide = function(divId) 
{ 
    if(document.getElementById(divId).style.display == 'none') 
    { 
     var alltexts = document.getElementsByClassName('mid'); 
     for(var i=0;i<alltexts.length;i++) 
      alltexts[i].style.display = 'none'; 
     document.getElementById(divId).style.display='block'; 
    } 
    else 
    { 
     document.getElementById(divId).style.display = 'none'; 
    } 
} 

在ShowHide中，我们必须在显示点击的项目文本之前隐藏所有文本。

查找工作小提琴HERE。

Answer 2

例如一些解决方案：

1. 您可以创建其中将包含当前显示元素和更新每次点击环球JS元素。

2. 您可以在每次点击时先隐藏所有元素，然后显示所需的元素。