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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery 选择器详解
Jan 19 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
微信小程序自定义胶囊样式
Dec 27 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
怎样自定义一个异常类
2016/09/27 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
项目计划书范文
2014/01/09 职场文书
毕业生自荐书
2014/02/02 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
小学校长汇报材料
2014/08/20 职场文书
股东大会通知
2015/04/24 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python