javascript有用小技巧—实现分栏显示
记得给师哥师姐測试考试系统的时候，看到他们的考试页面能够实现隐藏左边的考生信息部分，当时认为好高大上。好人性化。
如今学了javascript，我也能实现这个功能了，以下来显摆一下。
1.页面设计：
(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).说明：事实上这个页面非常easy，仅仅需一个一行三列的表格。第一部分放栏目名称，第三部分是主要内容。中间部分放一张左(右)箭头的图片，曾经想多了，还以为是一个非常牛的控件。
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)效果：
(2)说明：最初显示的是“左箭头”,点击图片会响应hide()事件，将栏目部分隐藏，同一时候将左箭头换成右箭头。当点击“右箭头”时会响应show()事件，显示隐藏的栏目部分，同一时候将右箭头换为左箭头。又回到最初的状态。这样说来事实上非常easy。做起来也非常容易。
通过这一阶段javascript的学习。感觉非常有趣味。在之前什么都不知道的情况下，总是想得非常难，给自己心理压力，当亲身去经历的时候。发现也就那么回事儿，慢慢地培养了学习的兴趣。如今登录一个站点或者使用一个软件的时候，会不由自觉地考虑它是怎么实现的，哪儿做得好。哪儿须要改进，逐渐向一个专业人士靠近。
javascript要学习的东西还非常多，今天展示的仅仅是冰山一角，带着兴趣和好奇继续加油！
javascript有用小技巧—实现分栏显示的更多相关文章
- 你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
- JavaScript 编码小技巧
三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) { answer = ...
- 19 个 JavaScript 编码小技巧
这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好 ...
- PHP开发小技巧①①—php实现手机号码显示部分
从个人信息保护性的角度来讲,我们在开发过程中总会想办法去保护用户的一些个人信息.就如本篇博文所讲,我们有时会将用户的手机号码只显示出部分,这是很多网站都有做的功能.这个功能实现起来也是特别的简单,只需 ...
- vscode分栏显示快捷键
vscode没有默认的分栏快捷键,我们可以自定义,步骤如下: 1.Crtl + k,再Ctrl + s,调出快捷键设置面板 2.在搜索栏输入"视图:",在未定义快捷键的区域找到&q ...
- Eclipse用法和技巧十一：分栏显示
在编码的时候,有时候需要同时看到两个文件的代码.或者在代码走读的时候,能同时看到两个文件的代码能加快我们对代码的理解.来看看如何在eclipse中同时显示两个文件的代码. 步骤一:拖住一 ...
- JavaScript 转换小技巧
1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做 ...
- Javascript 编程小技巧总结（部分内容借鉴他人）
1 – 使用===,而不是＝＝ ==(或!=)操作符在需要的时候会自动执行类型转换.===(或!==)操作不会执行任何转换.它将比较值和类型,而且在速度上也被认为优于==. 2 – 使用闭包实现私有变 ...
- JavaScript 调试小技巧
'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...
随机推荐
- redis优化配置和redis.conf说明
1. redis.conf 配置參数: #是否作为守护进程执行 daemonize yes #如以后台进程执行,则需指定一个pid,默觉得/var/run/redis.pid pidfile redi ...
- PPPOE 模拟环境搭建
这段时间.包含我自己測试OTT盒子 PPPOE的时候比較痛苦.要不就是在别人的位置上測试.要不就是借用PPPOE的设备,认为还是自己搭建一个PPPOE真实拨号上网的环境多好! 可是坑爹的win7找不到 ...
- JDBC数据库连接
JDBC是什么? Java Data Base Connectivity JDBC是: 以统一方式訪问数据库的API,能够訪问不论什么类型表列数据.特别是存储在关系数据中的数据.JDBC代表Java数 ...
- "ScrollView can host only one direct child"问题解决了
1. 问题叙述性说明: (请注意以下几点大胆). ScrollView作为顶层view时报错,直接导致apk崩溃.具体错误信息例如以下: 12-21 09:12:15.150: D/AndroidRu ...
- linux LNMP自动安装脚本
#!/bin/bashsoft_dir="/home/soft"config_dir="/home/config"httpd="httpd-2.0.5 ...
- IIS总提示输入用户名和密码
解决办法: 第一步,在"运行"中输入"gpedit.msc"调出组策略设置. 找到计算机配置-管理模块-windows 组件-internet控制面板-安全页- ...
- [Unity3D]Unity3D游戏开发之飞机大战项目解说
大家好,我是秦元培,欢迎大家继续关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 首先感谢大家对我博客的关注,今天我想和大家分享的是一个飞机大战的项目.这是一个比較综合的 ...
- Python学习入门基础教程(learning Python)--3.3.1 Python下的布尔表达式
简单的说就是if要判断condition是真是假,Python和C语言一样非0即真,所以如果if的condition是布尔表达式我们可以用True或者非0数(不可是浮点数)表示真,用False或者0表 ...
- 仿CSDN Blog返回页面顶部功能
只修改了2个地方: 1,返回的速度-->改成了慢慢回去.(原来是一闪而返回) 2,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来.(原来是向下滚动500px后才显示) 注意:JS ...
- HDU1194_Beat the Spread!
Beat the Spread! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...