멀티 레이어 div 표시 및 숨기기

감사합니다. 여기 내 문제에 관심을 가져 주셔서 감사합니다. 나는 PHP와 jQuery 프로그래밍을위한 초보자이다. 이제 다중 레이어 div를 표시하거나 숨기는 매우 간단한 함수를 만들려고합니다. 예를 들어, "show div 1"을 클릭하면 div 1에 해당하는 내용이 표시됩니다 (div 1 내용). 그 후에 div 1 아래의 내용을 클릭하면 더 낮은 수준의 내용 (그래프 1)을 볼 수 있습니다. 나는이 모든 것이 제대로 작동하도록했다. 그러나 "show div 2"를 클릭하면 div 2 내용 (div 2 내용)이 표시되지만 div 1의 하위 내용은 그대로 남아 있습니다 (그래프 1). 내가 원하는 것은 div 1의 하위 콘텐츠가 표시되고 div 2를 클릭하면 div 1의 하위 콘텐츠가 숨겨져 div 2 콘텐츠 만 표시됩니다. 다음은 내 코드입니다 ~멀티 레이어 div 표시 및 숨기기

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

출처

2012-08-22 user1616230

이 당신의 코드를 바꿉니다 사전에들 감사합니다, 그것이 내가 원하는 것을 정확히 당신에게

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-22 07:50:55 gaurang171

도움이 될 것입니다 희망! 너무 너무 고마워요 !!! – user1616230

멀티 레이어 div 표시 및 숨기기

답변

관련 문제