记得给师哥师姐測试考试系统的时候，看到他们的考试页面能够实现隐藏左边的考生信息部分，当时认为好高大上。好人性化。

如今学了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有用小技巧—实现分栏显示的更多相关文章

  1. 你想的到想不到的 javascript 应用小技巧方法

    javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...

  2. JavaScript 编码小技巧

    三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) { answer = ...

  3. 19 个 JavaScript 编码小技巧

    这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好 ...

  4. PHP开发小技巧①①—php实现手机号码显示部分

    从个人信息保护性的角度来讲,我们在开发过程中总会想办法去保护用户的一些个人信息.就如本篇博文所讲,我们有时会将用户的手机号码只显示出部分,这是很多网站都有做的功能.这个功能实现起来也是特别的简单,只需 ...

  5. vscode分栏显示快捷键

    vscode没有默认的分栏快捷键,我们可以自定义,步骤如下: 1.Crtl + k,再Ctrl + s,调出快捷键设置面板 2.在搜索栏输入"视图:",在未定义快捷键的区域找到&q ...

  6. Eclipse用法和技巧十一：分栏显示

    在编码的时候,有时候需要同时看到两个文件的代码.或者在代码走读的时候,能同时看到两个文件的代码能加快我们对代码的理解.来看看如何在eclipse中同时显示两个文件的代码.        步骤一:拖住一 ...

  7. JavaScript 转换小技巧

    1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做 ...

  8. Javascript 编程小技巧总结（部分内容借鉴他人）

    1 – 使用===,而不是＝＝ ==(或!=)操作符在需要的时候会自动执行类型转换.===(或!==)操作不会执行任何转换.它将比较值和类型,而且在速度上也被认为优于==. 2 – 使用闭包实现私有变 ...

  9. JavaScript 调试小技巧

    'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...

随机推荐

  1. [C++]函数指针与指针函数

    函数指针与指针函数,之前总是分不清,今天就好好把它两认认清楚. 先从概念说起,简单是理解. 函数指针:是指针.一个指向某一个函数入口地址的指针. 指针函数:是函数.一个返回值是指针的函数. 记忆: 从 ...

  2. Ctrl-A全选

    Ctrl-A全选这点事(C#,WinForm)   所有的文本框,不管单行多行都Ctrl-A全选就好了吧?是啊,很方便.Windows的软件基本都是这样.可为什么我们自己制作的WinForm就默认不是 ...

  3. sql优化-提防错误关联

    在写sql时,在多表关联时,有时候容易把关联关系写错.一般情况下,该问题比较容易发现,但如果sql较长时,光靠眼力就比较难发现了.今天写了一个脚本,碰到该问题了. 第一版本的脚本如下: select ...

  4. debian下使用siege进行压力测试

    一:siege siege是开源的一个测试工具,可以对指定文本的URL列表进行负载测试,也可以在执行其他请求前让某个请求休眠,从而让你感觉某个用户在转移到web应用的下一个文档前正在读取该文档. ht ...

  5. Servlet(二)GenericServlet

    以GenericServlet创建Servlet 1.在FirstServlet同文件夹下建立GServlet.java package com.hunhun; import javax.servle ...

  6. 在阿里云的CentOS环境中安装django

    购买了一台阿里云主机.操作系统为CentOS 6.5.准备在上面跑Django做Web开发.因为CentOS自带的python版本号较低,安装Django先要安装新版本号python.还是费了点周折. ...

  7. Spring实战笔记2---Bean的装配

    创建应用对象之间协作关系的行为通常成为装配,该篇的主要内容有两个,一个Spring装配Bean的几种方式以及Spring表达式,事实上这两者是分不开的,在Spring中,对象无需自己负责查找或者创建与 ...

  8. WPF界面设计技巧（10）-样式的继承

    原文:WPF界面设计技巧(10)-样式的继承 PS:现在我的MailMail完工了,进入内测阶段了,终于可以腾出手来写写教程了哈,关于MailMail的介绍及内测程序索取:http://www.cnb ...

  9. 局部权重线性回归(Locally weighted linear regression)

    在线性回归中,因为对參数个数选择的问题是在问题求解之前已经确定好的,因此參数的个数不能非常好的确定,假设參数个数过少可能拟合度不好,产生欠拟合(underfitting)问题,或者參数过多,使得函数过 ...

  10. 去掉word中向下的箭头^l----->^p

    去掉word中向下的箭头 在网页上复制文章到word中,会发现有很多向下的箭头,这些 符号叫做软回车符.如何去掉这些向下的箭头呢.步骤如下: 方法/步骤 按Ctrl+H,弹出全局替换窗口,输入查找内容 ...