关于利用js实现css切换布局视图的方法

来源：互联网发布：apache 隐藏index.php 编辑：程序博客网时间：2024/04/27 14:43

1，主要是方法是div+css规划好布局之后，根据鼠标的事件onmouseove、onmouseout来相应，当然也可以改成onclick时间等，然后通过传id值到函数，判断是否被选中，根据选中与否同时关联display属性，设置block/none来显示布局

在css中关于显示或者隐藏布局的属性主要是有2个比较容易混淆的：visibility和display两个属性

因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，但是该元素仍然会占据设计的位置，而在一般的网页布局中，肯定是希望隐藏后不占用位置的，因此用的是display属性，关于这两个易混淆的属性的区分，在这篇博客里面有介绍http://blog.csdn.net/sunshinestation/article/details/1836366

下面是主要的一些代码

likesouhu.html

<html><head><link rel="stylesheet" href="likesouhu.css" type="text/css" /><title>仿搜狐网站的js的div切换 </title><script language="javascript" type="text/javascript">function change(val,obj){obj.style.backgroundColor="yellow";/*alert("ok");*/   if(val=="zs"){   zs.style.display="block";   rz.style.display="none";   }else if(val=="rz"){   rz.style.display="block";   zs.style.display="none";   }}function change2(obj){obj.style.backgroundColor="silver";}</script></head><body> <div class="div1"><div class="navi"><ul><li onmouseover="change('zs',this)" onmouseout="change2(this)">招生</li><li onmouseover="change('rz',this)" onmouseout="change2(this)">热招</li><li>出国</li></ul></div><!--超链接的div--><div class="zs" id="zs" ><ul><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li><li><a href='#'>招生招生招生招生</a></li></ul></div><div class="rz" id="rz" ><ul><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li><li><a href='#'>热招热招热招热招</a></li></ul></div><div></body></html>

下面是其css文件likesouhu.css

body{font-size:12px;}.div1{width:126px;height:156px;/*background-color:pink;*/}.navi{width:21px;height:156px;/*background-color:silver;*/float:left;}.navi ul{padding:0px;margin-left:0px;float:left;}.navi ul li{list-style-type:none;width:21px;height:50px;margin-top:2px;background-color:silver;float:left;text-align:center;padding-top:10px;}.zs,.rz{width:98px;height:156px;/*background-color:silver;*/margin-left:4px;margin-top:4px;float:left;}.zs ul,.rz ul{padding:0px;margin-left:0px;float:left;}.zs ul li,.rz ul li{list-style-type:none;margin-top:0px;margin-left:2px;line-height:17px;float:left;}.rz{display:none;}/*body{font-size:12px;}.div1{width:126px;height:156px;background-color:pink;}.navi{width:21px;height:156px;float:left;}.navi ul{padding:0px;margin-left:0px;margin-top:0px;float:left;}.navi ul li{list-style-type:none;width:21px;height:38px;margin-top:3px;text-align:center;padding-top:10px;background-color:silver;float:left;}.zs,.rz{width:100px;height:156px;margin-left:4px;float:left;}.zs ul,.rz ul{padding:0px;margin-top:2px;margin-left:0px;float:left;}.zs ul li,.rz ul li{list-style-type:none;margin-top:0px;margin-left:2px;line-height:19px;float:left;}.rz{/*visibility:hidden;*//*display:none;}*/

得到的效果如下：

左边的div关于招生、热招、出国的栏目部分以及右边的分层部分，在现在的网站引擎中都是用列表形式即：<ul><li></li></ul>来实现的

0 0