求:用javascript来控制多个层的显示与隐藏,下个层显示时上个层自动隐藏?解决方法
日期：2014-05-16 浏览次数：20369 次
求:用javascript来控制多个层的显示与隐藏,下个层显示时上个层自动隐藏?
这个效果我从网上找到资料已经做到了,但要的效果是,点一下就显示这个层,再点下一个的时候,这个层会自动隐藏显示下一个层.我就需要一个这样的判断语句,不知道怎么去写啊
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> new page </title>
<script>
function show(i){
document.getElementById( "div "+i).style.display= "block ";
if(document.getElementById( "hidden1 ").value!= " "&&document.getElementById( "hidden1 ").value!= "div "+i){
document.getElementById(document.getElementById( "hidden1 ").value).style.display= "none ";
}
document.getElementById( "hidden1 ").value= "div "+i;
}
</script>
</head>
<body>
<div id=div1 style= "position:absolute;left:0px;top:100px;width:100px;height:100px;background-color:#dddddd;display:none "> div1 </div>
<div id=div2 style= "position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#cccccc;display:none "> div2 </div>
<div id=div3 style= "position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#bbbbbb;display:none "> div3 </div>
<div id=div4 style= "position:absolute;left:300px;top:100px;width:100px;height:100px;background-color:#aaaaaa;display:none "> div4 </div>
<input type=hidden id=hidden1 value= " ">
<input type=button value= "显示div1 " onclick=show(1)>
<input type=button value= "显示div2 " onclick=show(2)>
<input type=button value= "显示div3 " onclick=show(3)>
<input type=button value= "显示div4 " onclick=show(4)>
</body>
</html>
这个效果我从网上找到资料已经做到了,但要的效果是,点一下就显示这个层,再点下一个的时候,这个层会自动隐藏显示下一个层.我就需要一个这样的判断语句,不知道怎么去写啊
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> new page </title>
<script>
function show(i){
document.getElementById( "div "+i).style.display= "block ";
if(document.getElementById( "hidden1 ").value!= " "&&document.getElementById( "hidden1 ").value!= "div "+i){
document.getElementById(document.getElementById( "hidden1 ").value).style.display= "none ";
}
document.getElementById( "hidden1 ").value= "div "+i;
}
</script>
</head>
<body>
<div id=div1 style= "position:absolute;left:0px;top:100px;width:100px;height:100px;background-color:#dddddd;display:none "> div1 </div>
<div id=div2 style= "position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#cccccc;display:none "> div2 </div>
<div id=div3 style= "position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#bbbbbb;display:none "> div3 </div>
<div id=div4 style= "position:absolute;left:300px;top:100px;width:100px;height:100px;background-color:#aaaaaa;display:none "> div4 </div>
<input type=hidden id=hidden1 value= " ">
<input type=button value= "显示div1 " onclick=show(1)>
<input type=button value= "显示div2 " onclick=show(2)>
<input type=button value= "显示div3 " onclick=show(3)>
<input type=button value= "显示div4 " onclick=show(4)>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
