javascript实现分栏显示小技巧附图


Posted in Javascript onOctober 13, 2014

记得给师哥师姐测试考试系统的时候,看到他们的考试页面可以实现隐藏左边的考生信息部分,当时觉得好高大上,好人性化。现在学了javascript,我也能实现这个功能了,下面来显摆一下。

1.页面设计:
javascript实现分栏显示小技巧附图
(1).html代码:

<title>js分栏</title> 
<style type="text/css"> 
.alignment{ 
text-align: center; 
} 
</style> 
</head> 
<script language="javascript" type="text/javascript"> 
//...... 
</script> 
<body> 
<table width="412" height="296" border="1"> 
<tr> 
<td width="113" height="292" id="lanmu"> 
<p class="alignment"><a href="#">栏目一</a></p> 
<p class="alignment"><a href="#">栏目二</a></p> 
<p class="alignment"><a href="#">栏目三</a></p> 
<p class="alignment"><a href="#">栏目四</a></p> 
<p class="alignment"><a href="#">栏目五</a></p> 
</td> 
<td width="15"> 
<span id="pic"><img src="image/left.PNG" width="15" height="39" onclick="hide()" /> 
</span> 
</td> 
<td width="360" class="alignment">这里是内容区域!</td> 
</tr> 
</table> 
</body> 
</html>

(2).说明:其实这个页面很简单,只需一个一行三列的表格。第一部分放栏目名称,第三部分是主要内容。中间部分放一张左(右)箭头的图片,以前想多了,还以为是一个很牛的控件。

2.javascript代码:

<script language="javascript" type="text/javascript"> 
function hide()//点击左箭头,隐藏栏目部分 
{ 
//第一步:隐藏栏目列表 
document.getElementById("lanmu").style.display="none"; 
//第二步:同时将箭头图片更换,左箭头响应的事件是显示show() 
document.getElementById("pic").innerHTML="<img src='image/right.PNG' onclick='show()' />"; 
} 
function show()//点击右箭头,显示被隐藏的栏目部分 
{ 
//第一步:显示栏目列表 
document.getElementById("lanmu").style.display=""; 
//第二步:同时更换箭头图片,左箭头响应的事件是隐藏hide() 
document.getElementById("pic").innerHTML="<img src='image/left.PNG' onclick='hide()' />"; 
} 
</script>

(1)效果:

javascript实现分栏显示小技巧附图javascript实现分栏显示小技巧附图

(2)说明:最初显示的是“左箭头”,点击图片会响应hide()事件,将栏目部分隐藏,同时将左箭头换成右箭头。当点击“右箭头”时会响应show()事件,显示隐藏的栏目部分,同时将右箭头换为左箭头,又回到最初的状态。这样说来其实很简单,做起来也很容易。

通过这一阶段javascript的学习,感觉很有趣味。在之前什么都不知道的情况下,总是想得很难,给自己心理压力,当亲身去经历的时候,发现也就那么回事儿,慢慢地培养了学习的兴趣。现在登录一个网站或者使用一个软件的时候,会不由自觉地考虑它是怎么实现的,哪儿做得好,哪儿需要改进,逐渐向一个专业人士靠近。

javascript要学习的东西还很多,今天展示的只是冰山一角,带着兴趣和好奇继续加油!

Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
解决$store.getters调用不执行的问题
Nov 08 Javascript
jquery引用方法时传递参数原理分析
Oct 13 #Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 #Javascript
js的touch事件的实际引用
Oct 13 #Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 #Javascript
5个JavaScript经典面试题
Oct 13 #Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 #Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 #Javascript
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
thinkPHP的表达式查询用法详解
2016/09/14 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Prototype Number对象 学习
2009/07/19 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
canvas知识总结
2017/01/25 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python实现微信小程序自动回复
2018/09/10 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python requests使用socks5的例子
2019/07/25 Python
python super用法及原理详解
2020/01/20 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
生物制药自我鉴定
2014/01/25 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
买卖合同协议书范本
2014/10/18 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
红色电影观后感
2015/06/18 职场文书