注:本文由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.itcolin.com/demo/div_display_demo.html

点击自动显示/隐藏DIV代码。(简单实用)的更多相关文章

  1. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  2. 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  3. 自动显示隐藏布局的listView

    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示 ...

  4. JQuery - 垂直显示隐藏DIV

    效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...

  5. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  6. jquery点击其他地方隐藏div层的实现程序

    js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...

  7. 让Dock自动 显示/隐藏 不再有延迟

    Safari 5.2 Mac OS X 10.7.2 <ignore_js_op> 可能很多朋友使用Mac的时候都会选择将Dock隐藏(可以在系统偏好设置-Dock中选择),等到使用的时候 ...

  8. js实现点击切换显示隐藏,点击其它位置再隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 点击其他地方隐藏div

    document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueSh ...

随机推荐

  1. 解决:SharePoint当中的STP网站列表模板没有办法导出到其它语言环境中使用

    首在在你的英文版本上,导出列表或是网站的模板,这个文件可能是这样滴:template.stp 把这个文件 template.stp 命名为 template.cab 解压 这个 *.cab 文件 在解 ...

  2. Linux下常用压缩 解压命令和压缩比率对比

    常用的格式有:tar, tar.gz(tgz), tar.bz2, 不同方式,压缩和解压方式所耗CPU时间和压缩比率也差异也比较大. 1. tar只是打包动作,相当于归档处理,不做压缩:解压也一样,只 ...

  3. 10个顶级的CSS UI开源框架

    随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现 ...

  4. XidianOJ 1154 Nhywieza 的串

    题目描述 输入 输出 对于每组数据输出 1 行,表示最少的操作次数. --正文 找到连续的0一起变就好 #include <iostream> #include <cstring&g ...

  5. arcgis破解的时候,不能启动license manager的问题

    1.防火墙没关:(非常重要) 2.win+R,调出控制台,输入services.msc.然后手动开启ArcGIS license manager服务,关闭其余类似erdas,matlab影响该服务的开 ...

  6. C# 多线程的等待所有线程结束 用 ManualResetEvent 控制

    using System; using System.Collections.Generic; using System.Threading; namespace ConsoleApplication ...

  7. 简述AFN(AFNetWorking 2.X)的实现分析和简单使用【转】

    [转载] Axc注:版本为AFNetWorking 2.6    3.0需要修改大部分对象 一:声明本 人以前一直是使用ASI网络请求类库的.最近才开始了解使用AFNetworing这个类库.网上也肯 ...

  8. [BS-20] 导航控制器和视图控制器在添加控制器的区别

    导航控制器和视图控制器在添加控制器的区别 1. 因导航控制器拥有导航栈,有一个普通视图控制器都没有的数组viewControllers,加入该数组中的视图控制器默认以push的方式进入导航栈.导航控制 ...

  9. UITbaleView上按钮的单选

    设置Id属性,标记是哪个cell @property (nonatomic,assign)NSInteger Id; 设置一个普通状态和选中状态图片不同的按钮 _choose = [[UIButton ...

  10. PAT1003——我要通过!

    “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...