javascript实现分栏显示小技巧附图

2022-01-14,,,,

考试页面可以实现隐藏左边的考生信息部分,学了javascript后也能实现这个功能了,下面是实现思路、代码及解效果截图,喜欢的朋友们可以看看

记得给师哥师姐测试考试系统的时候,看到他们的考试页面可以实现隐藏左边的考生信息部分,当时觉得好高大上,好人性化。现在学了javascript,我也能实现这个功能了,下面来显摆一下。

1.页面设计:

(1).html代码:

 js<a href="https://kunjuke.com/tag/107410/" title="分栏" target="_blank">分栏</a> .alignment{ text-align: center; }  

栏目一

栏目二

栏目三

栏目四

栏目五

这里是内容区域!

(2).说明:其实这个页面很简单,只需一个一行三列的表格。第一部分放栏目名称,第三部分是主要内容。中间部分放一张左(右)箭头的图片,以前想多了,还以为是一个很牛的控件。

2.javascript代码:

 

(1)效果:

(2)说明:最初显示的是“左箭头”,点击图片会响应hide()事件,将栏目部分隐藏,同时将左箭头换成右箭头。当点击“右箭头”时会响应show()事件,显示隐藏的栏目部分,同时将右箭头换为左箭头,又回到最初的状态。这样说来其实很简单,做起来也很容易。

通过这一阶段javascript的学习,感觉很有趣味。在之前什么都不知道的情况下,总是想得很难,给自己心理压力,当亲身去经历的时候,发现也就那么回事儿,慢慢地培养了学习的兴趣。现在登录一个网站或者使用一个软件的时候,会不由自觉地考虑它是怎么实现的,哪儿做得好,哪儿需要改进,逐渐向一个专业人士靠近。

javascript要学习的东西还很多,今天展示的只是冰山一角,带着兴趣和好奇继续加油!

以上就是javascript实现分栏显示小技巧附图的详细内容,更多请关注本站其它相关文章!

《javascript实现分栏显示小技巧附图.doc》

下载本文的Word格式文档,以方便收藏与打印。