资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
CSS/HTML教程
>>>
标准布局应用：显示/隐藏侧边栏 [附详细注解]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>显示/隐藏</title> <style type="text/css"> <!-- /* PR 50198763 */ *{margin:0;padding:0;}/* 消除所有标记的内外补丁默认值 */ #left,#right{height:620px;}/* 定义容器的高度 */ #left{background:#CCC;}/* 定义背景颜色，用于区分左右容器 */ #right{background:#f5f5f5;}/* 同上 */ .left{float:left;width:20%;display:block;} /* 定义左边容器的宽度 */ .right{float:left;width:80%;display:block;clear:right;} /* 定义右边容器的宽度 */ .left1{width:0%;display:none;} /* 定义左边容器收拢时的状态：隐藏 */ --> </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20pr()%20%0D%0A%7B%20%0D%0Avar%20L%3Ddocument.getElementById(%22left%22)%3B%20%2F%2F%20%E5%8F%98%E9%87%8F%EF%BC%9AL%E4%BB%A3%E8%A1%A8%20id%3D%22left%22%20%E7%9A%84%E6%A0%87%E8%AE%B0%20%0D%0Avar%20R%3Ddocument.getElementById(%22right%22)%3B%20%2F%2F%20%E5%8F%98%E9%87%8F%EF%BC%9AR%E4%BB%A3%E8%A1%A8%20id%3D%22right%22%20%E7%9A%84%E6%A0%87%E8%AE%B0%20%0D%0Aif%20(L.className%3D%3D%22left%22)%20%2F%2F%20%E5%88%A4%E6%96%AD%EF%BC%9A%E5%A6%82%E6%9E%9C%20id%3D%22left%22%20%E7%9A%84class%E5%80%BC%20%E7%AD%89%E4%BA%8Eleft%E7%9A%84%E8%AF%9D%EF%BC%8C%E5%B0%86%E6%89%A7%E8%A1%8C%E4%B8%8B%E9%9D%A2%7B%7D%E9%87%8C%E9%9D%A2%E7%9A%84%E5%86%85%E5%AE%B9%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20L.className%3D%22left1%22%3B%20%2F%2F%20%E7%BB%99%20id%3D%22left%22%20%E7%9A%84%E6%A0%87%E8%AE%B0%20%E5%8A%A0%E4%B8%8Aclass%EF%BC%9Aleft1%20%0D%0A%20%20%20%20%20%20%20%20R.className%3D%22%20%22%3B%20%2F%2F%20id%3D%22right%22%20%E7%9A%84%E6%A0%87%E8%AE%B0%20%E5%8A%A0%E4%B8%8Aclass%EF%BC%9A%E7%A9%BA%E6%A0%BC%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E6%B6%88%E9%99%A4class%20%0D%0A%20%20%20%20%7D%20%0D%0Aelse%20%2F%2F%20%E5%88%A4%E6%96%AD%EF%BC%9A%E5%A6%82%E6%9E%9C%20id%3D%22left%22%20%E7%9A%84class%E5%80%BC%20%E4%B8%8D%E7%AD%89%E4%BA%8Eleft%E7%9A%84%E8%AF%9D%EF%BC%8C%E5%B0%86%E6%89%A7%E8%A1%8C%E4%B8%8B%E9%9D%A2%7B%7D%E9%87%8C%E9%9D%A2%E7%9A%84%E5%86%85%E5%AE%B9%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20L.className%3D%22left%22%3B%20%2F%2F%20%E7%BB%99%20id%3D%22left%22%20%E7%9A%84%E6%A0%87%E8%AE%B0%20%E5%8A%A0%E4%B8%8Aclass%EF%BC%9Aleft%20%0D%0A%20%20%20%20%20%20%20%20R.className%3D%22right%22%3B%20%2F%2F%20%E7%BB%99%20id%3D%22right%22%20%E7%9A%84%E6%A0%87%E8%AE%B0%20%E5%8A%A0%E4%B8%8Aclass%EF%BC%9Aright%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div id="left" class="left"></div> <div id="right" class="right"> <a href="javascript:pr()" _ewebeditor_ta_href="javascript%3Apr()">显示/隐藏</a> 俺是个js初学者，献丑了。这段js演示其实很简单，俺在这里只是想跟js大大们说一句：js是行为，不要跟样式表打架。有些事还是该由css来做的，例如：display:none || display:block，简直泛滥成灾了！俺只会玩玩css，拿到js不会改，不敢改，唉。明明一个class就能甩给css做的事，js为啥要抢着做呢？搞得俺们这些会点css滴菜鸟们好是郁闷~难道玩css就一定要会js么？ </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程