三栏交互显示隐藏新闻框

最近在实习，要做一个可以现实三栏交互显示隐藏新闻框

自己查了额下资料，写了一个很简单的function ，以前也看了不少javascript书籍，只是做做书上的例子，

印象不是很深刻左后，那些知识渐渐的就会被遗忘，

只有自己去做自己想要的效果

才能做太真把知识化为己有

总之一句话“实践出真知”

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
a {  width:50px; text-decoration:none; float:left; background:#999999; color:#FFFFFF; line-height:20px; font-size:15px;}
a:hover{ background:#000000;}
a visited{ background:#000000;}
#main3{  width:150px; height:200px; background:#000; height:200px; display:none; color:#FFFFFF;}
#main2{  width:150px; height:200px; background:#000; height:200px; display:none; color:#FFFFFF;}
#main1{ width:150px; height:200px; background:#000; height:200px; color:#FFFFFF; display:block;}
</style>
</head>
<script language="javascript">
function hide(obj)
{
obj.style.display="none";


}
function displayshow(obj,x,y)
{
obj.style.display="block";
x.style.display="none";
y.style.display="none";
}
function main1show( obj)
{ obj.style.display="block";}

 

</script>
<body>
<div style="clear:both; height:20px; border:1px #009933 thin; width:150px;" > <a href="#" onMouseOver="displayshow(main1,main2,main3)">栏目一</a> <a href="#" onMouseOver="displayshow(main2,main1,main3)">栏目二</a> <a href="#" onMouseOver="displayshow(main3,main1,main2)">栏目三</a> </div>
<div id="main1">栏目一</div>
<div id="main2">栏目二</div>
<div id="main3">栏目三</div>
</body>
</html>

--------------------------------------------------------------

 

posted @ 2008-12-17 23:31  lance2008  阅读(78)  评论(0)    收藏  举报