管理
|
ant
No war in the world! |
今天做了一个 HTML页面 切换显示层的效果。很简单的技术，用到了一些简单的javascript+div+css,当然我是把样式写在了控件里，大家可以自己分出来。这个效果只是一个拙品，由这可以引申出更多特效，大家可以自己写一下。也希望大家多给意见，我是个初学者
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function HidePanel(str)
{
var aDiv = document.getElementById("div_red");
var dDiv = document.getElementById("div_blue");
var aBtn = document.getElementById("btn_showred");
var dBtn = document.getElementById("btn_showblue");
if(str == "red")
{
//这里是样式的控制。开始我写成disabled = "true",结果两个button都不可用了。后来把引号去掉，就对了。
aDiv.style.display = "block";
dDiv.style.display = "none";
aBtn.disabled = true;
dBtn.disabled = false;
}
if(str == "blue")
{
aDiv.style.display = "none";
dDiv.style.display = "block";
aBtn.disabled = false;
dBtn.disabled = true;
}
}
</script>
</head>
<body>
<div>
<input type="button" id="btn_showred" disabled="disabled" style="border:0px; padding:0px; background-color: transparent;" onclick="HidePanel('red')" value="显示红色层" />
<input type="button" id="btn_showblue" style="border:0px; padding:0px; background-color: transparent;" onclick="HidePanel('blue')" value="显示蓝色层" />
</div>
<br />
<div id="div_red" style="border:inset 5px red; width:600px; height:200px">层一</div>
<div id="div_blue" style="border:outset 5px blue; width:600px; height:200px; display:none">层二</div>
</body>
</html>