注:本文由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. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

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

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

  5. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

  6. 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件

    // 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...

  7. JQuery - 垂直显示隐藏DIV

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

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

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

  9. JS 显示隐藏DIV

    JS关闭DIV HTML <div id="bar1"> <p onclick="removeElement('bar1')">关闭&l ...

随机推荐

  1. java分解质因数

      package test; import java.util.Scanner; public class Test19 { /** * 分析:对n进行分解质因数,应先找到一个最小的质数k * 最小 ...

  2. JS冒泡排序(数组)

    冒泡排序是把数组相邻的两个值进行比较,然后根据条件执行相应的命令 var arr = [0,4,8,5,2,7,1,3,6,9]; for(var s = 0;s<arr.length;s++) ...

  3. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  4. linux 服务器对拷命令scp

    1.今天在进行linux下服务部署时由于重新部署的繁杂,所以我决定用scp命令在linux线上服务器(A)拷贝一份服务程序到现有的服务器(B)上: 具体的操作命令是:scp -r A_username ...

  5. js插入拼接链接 --包含可变字段

    // newsId: 传参过来的Id, pathIdlet newsDetailId = parseInt(this.props.newsId); goTo() { window.location.h ...

  6. RabbitMQ学习笔记4-使用fanout交换器

    fanout交换器会把发送给它的所有消息发送给绑定在它上面的队列,起到广播一样的效果. 本里使用实际业务中常见的例子, 订单系统:创建订单,然后发送一个事件消息 积分系统:发送订单的积分奖励 短信平台 ...

  7. HTML5的Web SQL Database

    本文将介绍 Web SQL Database 规范中定义的三个核心方法: openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象 transaction:这个方法允许我们根据情况 ...

  8. POJ 2240 Arbitrage(最短路 套汇)

    题意  给你n种币种之间的汇率关系  推断是否能形成套汇现象  即某币种多次换为其他币种再换回来结果比原来多 基础的最短路  仅仅是加号换为了乘号 #include<cstdio> #in ...

  9. 170116、centos6.4下nginx和ftp搭建图片服务器

    一.需要的组件 图片服务器两个服务: Nginx(图片访问): 1.http服务:可以使用nginx做静态资源服务器.也可以使用apache.推荐使用nginx,效率更高. 2.反向代理 实现 负载均 ...

  10. 翻译 Asp.Net Core 2.2.0-preview1已经发布

    Asp.Net Core 2.2.0-preview1已经发布 原文地址 ASP.NET Core 2.2.0-preview1 now available 今天我们很高兴地宣布,现在可以试用ASP. ...