Question

感谢您在这里关注我的问题。我是PHP和jQuery编程的初学者。现在我正在尝试创建一个非常简单的函数来显示和隐藏多层div。例如，当您单击“显示div 1”时，将显示div 1下的相应内容（这是div 1内容）。之后，您仍然可以单击div 1下的内容以显示较低级别的内容（graph1）。我把所有这些都搞定了。但是，当我点击“show div 2”时，将显示div 2内容（这是div 2内容），但div 1的低级内容仍然存在（graph1）。我想要的是显示div 1的较低内容，然后我点击显示div 2，div 1的较低内容将被隐藏并且仅显示div 2内容。以下是我的代码，谢谢你们提前〜

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>show and hide try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>
function showStock(n)
{
document.getElementById("div"+n).style.display = 'block'
return false;
}

function hideStock(n)
{
for (x=1; x<=10; x++)
{
document.getElementById("div"+x).style.display = 'none'
}
document.getElementById(n).style.display = 'block'
return false;
}

function toggleStock(id)
{
    for (x=1; x<=3; x++)
    {
        document.getElementById("div"+x).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
}

</script>


<script>
function showGraph(m)
{
document.getElementById("graph"+m).style.display = 'block'
return false;
}

function hideGraph(m)
{
for (y=1; y<=10; y++)
{
document.getElementById("graph"+y).style.display = 'none'
}
document.getElementById(m).style.display = 'block'
return false;
}

function toggleGraph(id)
{
    for (y=1; y<=3; y++)
    {
        document.getElementById("graph"+y).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
}

</script>

</head>

<body>

<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#" onClick="toggleStock('div1');return false;">show div 1</a> &nbsp;
<a href="#" onClick="toggleStock('div2');return false;">show div 2</a> &nbsp;
<a href="#" onClick="toggleStock('div3');return false;">show div 3</a>
</td>
</tr>
</table>

<div id="div1" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td><a href="#" onClick="toggleGraph('graph1');return false;">this is div 1 contents</a></td></tr>
</table>
</div>

<div id="div2" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td><a href="#" onClick="toggleGraph('graph2');return false;">this is div 2 contents</a></td></tr>
</table>
</div>

<div id="div3" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td><a href="#" onClick="toggleGraph('graph3');return false;">this is div 3 contents</a></td></tr>
</table>
</div>

<div id="graph1" style="display: none; border:1px solid black;">graph1</div>
<div id="graph2" style="display: none; border:1px solid black;">graph2</div>
<div id="graph3" style="display: none; border:1px solid black;">graph3</div>
</body>
</html>

Answer 1

用此替换您的代码，希望它能帮助您

function toggleStock(id)
{
    for (x=1; x<=3; x++)
    {
        document.getElementById("div"+x).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
  toggleGraph(id);
}

多层div显示和隐藏问题

1 个答案: