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里面打断 ...
随机推荐
- hdu1824(two-sat)
传送门:Let's go home 题意:有n个队伍要回家,但是每队必须留下一人,而且m个限制,a留下,b必须回家,问能否在限制条件下每队留下一人. 分析:将每个队的队长和两个队员当成i和i':然后对 ...
- php学习之道：WSDL具体解释(三)
通过声明方式定义绑定(binding)属性 假设你在服务中採用SOAP binding.你能够使用JAX-WS来指定一定数量的属性binding. 这些属性指定相应你在WSDL中指定的属性.某些设置. ...
- Dark Side of Cloud Storage —— 数据对像的分块消重
数据对像(可以通俗地认为是文件)的分块存储具有久远的历史.长久以来,单机文件系统一直将文件切分为若干固定大小的小块.其主要目的是为了进行有效的空间管理.互联网时代,大规模数据存储逐步发展起来.出于降低 ...
- ym——Android开发编码规范（自用）
转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! Android开发编码规范 目的及指导原则 目的 统一规范 Eclipse编辑环境下J ...
- mysql联合索引的应用
有一个log表,结构是这样的: CREATE TABLE `weblog` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `ip` varc ...
- WPF疑难杂症会诊
原文:WPF疑难杂症会诊 为什么图片像素是模糊的? 容器边框设为非整数时,其内容中的像素图片会产生模糊,即使设置SnapsToDevicePixels="True"也无效. 以下是 ...
- Ajax—初识
看DRP的过程.又一次学习了一遍Ajax.更深刻的体会到了Ajax所具有的魅力.Ajax是一种技术或者方法,更是一 种艺术.它让我们的程序以一种更完美的姿态呈如今用户面前.以下就让我们一起走进Ajax ...
- C#之再议数组和集合
1.数组 1.1简单数组 1.2 多维数组 1.3锯齿数组 1.4Array数组 1.5作为参数的数组 1.6枚举 1.7结构 以上部分可参考 http://www.cnblogs.com/ztb12 ...
- java平台的常用资源
分离领域 翻译 from :akullpp | awesome-java 大家一起学习,共同进步. 如果大家觉得有用,就mark一下,赞一下,或评论一下,让更多的人知道.thanks. 构建 这里搜集 ...
- C语言static 具体分析
google在最后三页C语言static内容,可找到的资料非常少.无论是长篇大论不知所云的话,在关键位置或跳过,习的人来说參考性不是非常大.所以.我这篇博文博採众家之长,把互联网上的资料整合归类,并亲 ...