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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
详解JavaScript修改注册表的方法
Jan 05 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
python类继承用法实例分析
2014/10/10 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
毕业自我评价
2014/02/05 职场文书
职工运动会感言
2014/02/07 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
最感人的道歉情书
2015/05/12 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
python实现简单的三子棋游戏
2022/04/28 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL