我要投稿

标准布局应用：显示/隐藏侧边栏 [附详细注解]

Nice CSS/HTML

2022-04-15 0 952

<!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> <script type=”text/javascript”> function pr() { var L=document.getElementById(“left”); // 变量：L代表 id=”left” 的标记 var R=document.getElementById(“right”); // 变量：R代表 id=”right” 的标记 if (L.className==”left”) // 判断：如果 id=”left” 的class值等于left的话，将执行下面{}里面的内容 { L.className=”left1″; // 给 id=”left” 的标记加上class：left1 R.className=” “; // id=”right” 的标记加上class：空格，也就是消除class } else // 判断：如果 id=”left” 的class值不等于left的话，将执行下面{}里面的内容 { L.className=”left”; // 给 id=”left” 的标记加上class：left R.className=”right”; // 给 id=”right” 的标记加上class：right } } </script> </head> <body> <div id=”left” class=”left”></div> <div id=”right” class=”right”> <a href=”javascript:pr()”>显示/隐藏</a> 俺是个js初学者，献丑了。这段js演示其实很简单，俺在这里只是想跟js大大们说一句：js是行为，不要跟样式表打架。有些事还是该由css来做的，例如：display:none || display:block，简直泛滥成灾了！俺只会玩玩css，拿到js不会改，不敢改，唉。明明一个class就能甩给css做的事，js为啥要抢着做呢？搞得俺们这些会点css滴菜鸟们好是郁闷~难道玩css就一定要会js么？ </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

收藏 (0) 点赞 (0)

免责声明：
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。不得使用于非法商业用途，不得违反国家法律。否则后果自负！

2、本站信息来自网络，版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序，请支持正版源码、软件，购买注册，得到更好的正版服务。
如有侵犯你版权的，请邮件与我们联系处理（邮箱:skknet@qq.com），本站将立即改正。

NICE源码网 CSS/HTML 标准布局应用：显示/隐藏侧边栏 [附详细注解] https://www.niceym.com/14239.html

Nice

上一篇： css写菜单：简洁注释版

下一篇：使用XHTML1.0 Strict中需要特别注意的地方

微信