点击自动显示/隐藏DIV代码。(简单实用)
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作!
很多时候我们需要将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
点击自动显示/隐藏DIV代码。(简单实用)的更多相关文章
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 自动显示隐藏布局的listView
借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示 ...
- iscroll5 滚动条根据内容高度自动显示隐藏及强制横屏时方向错位
横竖屏方向错位: move: function (e) { if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) { r ...
- JQ 点击指定文本框显示div。点击其他区域隐藏DIV
<input id="username" type="text" style="width:90%;margin-top: 40px;" ...
- 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件
// 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...
- JQuery - 垂直显示隐藏DIV
效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...
随机推荐
- Bzoj1455 罗马游戏
Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1622 Solved: 679 Description 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人 ...
- dedecms /member/resetpassword.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 DEDEcms SQL注入漏洞导致可以修改任意用户密码 2. 漏洞触发条 ...
- ubuntu14.04 gedit显示GB2312中文编码
在中文支持配置还不完整的Ubuntu 14.04中,使用gedit打开带有中文字符的文件有时会出现乱码的情况,这是由于gedit对字符编码匹配不正确导致的,解决方法如下: 在终端中输入如下命令,然后重 ...
- POJ 3735 Training little cats
题意 维护一个向量, 有三种操作 将第\(i\)个数加1 将第\(i\)个数置0 交换第\(i\)个数和第\(j\)个数 Solution 矩阵乘法/快速幂 Implementation 我们将向量写 ...
- git如何放弃所有本地修改?
问题描述: 本地做了一些修改,我用git rebase说有冲突.我现在想把本地的请求都干掉,可能有的已经commit过了(没有push过),完全同步成远程版本,应该用什么命令? 使用命令: git r ...
- asp.net中的窗口弹出实现,包括分支窗口 . ASP.NET返回上一页面实现方法总结 .
返回上一页的这个东东在我们做项目的时候一般是用于填写完表单后确认的时候,有对原来输入的数据进行修改或者更新时用的,或者是因为网站为了方便浏览者而有心添加的一个东东,一般这种功能的实现在ASP.NET中 ...
- python学习2 lambda表达式
学习C#的,对这个就特别熟悉了 lambda函数,它没有名字,只有参数和表达式: lambda args: expression def func1(func,arg): return func(a ...
- WinForm------TreeList实现鼠标经过节点背景色改变
转载: http://www.cnblogs.com/zfanlong1314/archive/2012/06/26/2564124.html
- win7开防火墙,允许ping通
- Oralce配置正确,报监听错误或无法识别描述中的服务
出差客户现场,修改过网络配置,回来后本地虚拟机的Oracle数据库就不能登陆了 报监听错误,在服务器中使用Net Configration Assistant删除以前的,重新配置新的,还是不行,重启系 ...