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

一些解决方案例如:

1. 您可以创建全局 JS 元素，它将包含当前显示的元素并在每次点击时更新它。

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