注:本文由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. bzoj 1391

    建图跑最小割,加当前弧优化. #include<iostream> #include<cstdio> #include<cstring> #include<q ...

  2. 图解HTTP

    1.返回结果的HTTP状态码 a. 2xx 成功: 200 ok 204 No Content  206 Partial Content b. 3XX重定向:301 Moved Permanently ...

  3. linux下截取整个网页

    前提需要安装 gimp图片处理软件 打开gimp 文件-创建-从网页  然后输入网页地址就可以截取整个网页了

  4. 統計數字(2007年NOIP全国联赛提高组)

    题目描述 Description [问题描述]某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*109).已知不相同的数不超过10000 个,现在需要统计这些自然数各自出现的 ...

  5. Android——requestWindowFeature

    requestWindowFeature可以设置的值有:1.DEFAULT_FEATURES:系统默认状态,一般不需要指定2.FEATURE_CONTEXT_MENU:启用ContextMenu,默认 ...

  6. EasyUI datetimebox设置默认值为当前时间

    设置value="${notices.release_time}" <input class="easyui-validatebox easyui-datetime ...

  7. focus on these tools

    http://www.oschina.net/p/dubbo http://www.blogjava.net/hispark/archive/2008/12/01/243310.html http:/ ...

  8. void void*

    void类型及void指针 1.概述 许多初学者对C/C 语言中的void及void指针类型不甚理解,因此在使用上出现了一些错误.本文将对void关键字的深刻含义进行解说,并 详述void及void指 ...

  9. 在DropDownList里显示多级分类

    protected void ddlBind() { DataTable dt = new DataTable(); ddlCategoryId.DataSource = getList(" ...

  10. IDX爱定客 | 氪加

    IDX爱定客 | 氪加 个性化定制鞋网站,在线定制只需三分钟