原文链接：http://www.jb51.net/article/79083.htm

<html>

<head>

<meta charset="gb2312">

<title>隐藏和显示</title>

<style type="text/css">

#thediv

{

 width:200px;

 height:100px;

 line-height:100px;

 text-align:center;

 background-color:green;

}

</style>

<script type="text/javascript">

function Show_Hidden(obj)

{

 if(obj.style.display=="block")

 {

  obj.style.display='none';

 }

 else

 {

  obj.style.display='block';

 }

}

window.onload=function()

{

 var olink=document.getElementById("link");

 var odiv=document.getElementById("thediv");

 olink.onclick=function()

 {

  Show_Hidden(odiv);

  return false;

 }

}

</script>

</head>

<body>

<a href="#" id="link">显示\隐藏切换</a>

<div id="thediv" style="display:block">脚本之家欢迎您</div>

</body>

</html>

以上代码实现了我们的要求，点击顶部链接可以实现div显示和隐藏的切换，下面介绍一下它的实现过程。
实现原理：
为链接注册onclick事件处理函数，此处理函数可以判断div的style.display属性值，如果为block则将其设置为none，也就是将div设置为隐藏状态，否则设置为block，也就是将div设置为显示状态，原理大致如此。需要特别注意的是，在div中，之所以使用style="display:block"的目的是让obj.style.display语句能够获取属性值，否则第一次点击无法将div设置为隐藏，大家可以去掉style="display:block"做一下测试，return false语句是为了防止链接的跳转效果。

javascript 点击按钮实现隐藏显示切换效果的更多相关文章

  1. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  2. Winform 基础二 最小化 最大化 关闭 点击任务栏隐藏显示 点击鼠标左键移动窗体

    一 最大化 二 最小化 三 关闭 四 点击任务栏隐藏显示 五 点击鼠标左键移动窗体 六 阴影效果鼠标左键移动窗口 #region UI设置 最大化.最小化.关闭.鼠标移动窗口.点击任务栏切换窗口 th ...

  3. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  4. 关于JavaScript点击按钮打开多个页面被浏览器以广告嫌疑拦截怎么解决

    JS点击按钮打开新的标签页,工作中遇到需要点击按钮打开一个或多个,需要用到window.open() 工作中我们可能需要打开多个,看以下代码: var data = [{ "id" ...

  5. swiper.js在隐藏/显示切换时，轮播出现bug的解决办法

    swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以 ...

  6. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  7. jQuery点击按钮实现div的隐藏和显示切换效果

    <script type="text/javascript"> $(function(){ $('#click_event').click(function(){  i ...

  8. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

  9. JavaScript中点击按钮弹出新的浏览器窗口

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.js * 作者:常轩 * 微信公众号:Worldhel ...

随机推荐

  1. Mac使用数据线连接ios,安装deb

    原创http://www.cnblogs.com/fply/p/8478702.html mac连接ios mac连接ios需要用到usbmuxd,这个可自行下载 到python-client目录下, ...

  2. 从零开始一起学习SLAM | 为什么要学SLAM？

    在<零基础小白,如何入门计算机视觉?>中我提到过,计算机视觉的研究目前主要分为两大方向:基于学习的方法和基于几何的方法.其中基于学习的方法最火的就是深度学习,而基于几何方法最火的就是视觉S ...

  3. SQL语句提取某列中的HTML文本内容。或者说怎么用SQL语句去除所有HTML标签

    CREATE FUNCTION [dbo].[f_trimstr] ( @str NVARCHAR(MAX) ) RETURNS NVARCHAR(MAX) AS     BEGIN          ...

  4. java.lang.ClassNotFoundException: org.hibernate.engine.FilterDefinition的解决方案

    今天在GitHub上面看到一个有意思的项目,下载下来,使用tomcat部署失败,出现异常,网上说JDK版本太高,改低,还是失败. 由于本人有个习惯,更喜欢把项目直接放入tomcat webapps 里 ...

  5. caffe中关于（ReLU层，Dropout层，BatchNorm层，Scale层）输入输出层一致的问题

    在卷积神经网络中.常见到的激活函数有Relu层 layer { name: "relu1" type: "ReLU" bottom: "pool1&q ...

  6. caffe神经网络中不同的lr_policy间的区别

    lr_policy可以设置为下面这些值,相应的学习率的计算为: - fixed:  保持base_lr不变. - step:  如果设置为step,则还需要设置一个stepsize,  返回 base ...

  7. html5-文本属性

    /*p{color: red;width: 50%;text-align: center;background: blue;}p{text-align: end;}p{text-align: end; ...

  8. C# 队列（Queue）和 堆栈（Stack）

    C# 队列(Queue)和 堆栈(Stack) C# 队列(Queue) 队列(Queue)代表了一个先进先出的对象集合.当您需要对各项进行先进先出的访问时,则使用队列.当您在列表中添加一项,称为入队 ...

  9. scu 4439 Vertex Cover

    题意: 给出n个点,m条边,将若干个点染色,使得每个边至少有一点染色,问至少染多少个点. 思路: 如果是二分图,那就是最小点覆盖,但是这是一般图. 一般图的最小覆盖是npc问题,但是这题有一个条件比较 ...

  10. Linux 系统管理命令

    1,uanme 查看是什么系统 uname - r 查看系统内核版本 2 cat /proc/cpuinfo 查看cpu 信息 3 cat /proc/meminfo 查看内存信息 4 date 查看 ...