0

thanks you for paying attention on my issue here. I am a total beginner for PHP and jQuery programming. Now I am trying to create a very simple function to show and hide multi-layer divs. For example, when you click "show div 1", the corresponding content under div 1 will be shown (this is div 1 contents). After that you still can click the content under div 1 to show lower level contents (graph1). I got all these worked properly. However, when I click "show div 2", the div 2 contents (this is div 2 contents) will be shown but the lower level contents of div 1 is still there (graph1). What I want is the lower content of div 1 is shown, and then I click show div 2, the lower content of div 1 will be hidden and only show div 2 contents. The following is my codes, thank you guys in advance~

<!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

Replace your code with this, Hope it will help you

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 に答える