0

感谢您在这里关注我的问题。我是 PHP 和 jQuery 编程的初学者。现在我正在尝试创建一个非常简单的函数来显示和隐藏多层 div。例如，当您点击“显示 div 1”时，会显示 div 1 下的相应内容（这是 div 1 的内容）。之后，您仍然可以单击 div 1 下的内容以显示较低级别的内容（graph1）。我让所有这些工作正常。但是，当我单击“显示 div 2”时，将显示 div 2 的内容（这是 div 2 的内容），但 div 1 的较低级别的内容仍然存在（graph1）。我想要的是显示div 1的下部内容，然后单击show 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>
4

1 回答 1

0

用这个替换你的代码，希望它会帮助你

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

    document.getElementById(id).style.display = 'block';
  toggleGraph(id);
}
于 2012-08-22T07:50:55.117 回答