点击自动显示/隐藏DIV代码。(简单实用)
2016-02-25 11:14
429 查看
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作!
很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字。这类效果在互联网上应用得很多,但实现的方法却是五花八门,有的甚至是全页代码,喜欢简洁明了的我肯定受不了。我的宗旨是“Write less,Do more!”
故,在这里,我提供一个最实用,最好控制且最简单的办法。
(代码分析:内容页代码中div默认设置为display:none,即不显示。当鼠标点击控制层时,查找内容页class与控制层中指定的相同名称,如”a1″。js代码将内容页的div中的sytle属性清空,从而实现显示出该div的内容。)
JS代码如下:
内容页代码,下面我已进行注释说明:
实现效果如下:
效果演示页面:http://www.feikk.com/demo/div_display_demo.html
很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字。这类效果在互联网上应用得很多,但实现的方法却是五花八门,有的甚至是全页代码,喜欢简洁明了的我肯定受不了。我的宗旨是“Write less,Do more!”
故,在这里,我提供一个最实用,最好控制且最简单的办法。
(代码分析:内容页代码中div默认设置为display:none,即不显示。当鼠标点击控制层时,查找内容页class与控制层中指定的相同名称,如”a1″。js代码将内容页的div中的sytle属性清空,从而实现显示出该div的内容。)
JS代码如下:
<script language="javascript"> function div_none(theclass){ var allPageTags = new Array(); var allPageTags = document.getElementsByTagName("div"); for (i=0; i<allPageTags.length;i++){ if(allPageTags[i].className == theclass){ var obj = allPageTags[i]; if(obj.style.display == "none"){ obj.style.display = ""; }else{ obj.style.display = "none"; } } } } </script>
内容页代码,下面我已进行注释说明:
<div><a name="a1" onClick="div_none('a1');" class="title">如何验证上网?</a></div> /*设置点击时触发js事件*/ <div style="display:none;" class="a1"> /*设置本div默认为隐藏*/ 内容区 </div>
实现效果如下:
效果演示页面:http://www.feikk.com/demo/div_display_demo.html
相关文章推荐
- Git本地仓库与Github远程仓库关联
- PyQt5系列教程(七)控件
- strcmpi
- C++Primer第5版读书笔记(第2章)
- spring DI 实现的模拟,依赖注入
- java全局变量引起的并发问题
- java中String对象的intern方法
- Spring 的动态数据源实现
- C/C++变量命名规则,个人习惯总结
- MyEclipse10破解工具,crack下载
- 摄像头/光驱故障:由于其配置信息(注册表中的)不完整或已损坏,Windows 无法启动这个硬件设备。 (代码 19)
- Spring mvc+hibernate+freemarker(开源项目)
- lua 插入排序和谢尔排序
- ASP.NET MVC 4 (十一) Bundles和显示模式
- Spring MVC @ResponseBody注解返回响应流时中文乱码问题的解决
- Pydev无法导入新python模块的解决方案
- Java-JDK各个版本的新特性
- python 查看模块的存放位置
- java 之Sting类型的List集合的汉字排序和String类型数组的汉字排序及List<Bean>排序
- Java调用系统命令学习(2)