Question

我正在研究一个项目。当你点击一个项目时出现下面的信息，我想知道当你点击下一个项目而不重新点击同一个项目时如何让它消失....例如我在我的项目中有披萨#I想点击肉披萨看到浇头然后点击奶酪披萨看到浇头和肉馅料消失。

这是我的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

在for函数中添加ShowHide()循环，如下所示：

<强>已更新

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

例如，某些解决方案：

您可以创建包含当前显示元素的全局JS元素，并在每次点击时更新它。
您可以在每次点击时首先隐藏所有元素，然后显示所需的元素。

Javascript出现/消失对象

2 个答案: