文档章节

js控制页面元素的隐藏与显示

风中帆
 风中帆
发布于 2014/05/29 16:57
字数 164
阅读 185
收藏 0

<body>

<div>
  <button onclick='javascript:Layer_HideOrShow();'>show</button>
  </div>
  <div id="hiddenDiv" style="display: block; visibility: visible;">
  this is hiddenDiv !
  </div>

</body>

 

1.

function Layer_HideOrShow() 

 {      var current=document.getElementById("hiddenDiv"); 

        if(current.style.visibility=="hidden") 

        {    current.style.visibility ="visible"; 

        } else  {  current.style.visibility ="hidden";  } 

 } 

2.
function  Layer_HideOrShow(){ 

     if (document.getElementById){ 

            target=document.getElementById("hiddenDiv"); 

             if (target.style.display=="block"){ 

                 target.style.display="none"; 

             } else { 

                  target.style.display="block"; 

             } 

     } 

}

3.
function  Layer_HideOrShow(){
   $("#hiddenDiv").show();  
   $("#hiddenDiv").hide(); 

}

4.

要控制div的显示与隐藏:
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

$("#id").css('display','none');
$("#id").css('display','block');

$("#id")[0].style.display = 'none';

© 著作权归作者所有

共有 人打赏支持
风中帆
粉丝 14
博文 197
码字总数 17695
作品 0
青岛
私信 提问
前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单   在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(...

grootzhang
2016/05/18
0
0
关于纯HTML前台和JFinal后台的问题

类似后台管理系统的应用(登录,首页,各种功能模块,各种统计,各种增删改查)。 要求纯HTML前台页面,后台使用JFinal提供API,前后台交互使用JQuery的ajax方法(统一ajax错误处理),交互的...

负心杏
2015/09/23
1K
3
Bootstrap JS插件使用实例(6)-折叠(手风琴效果)

本篇文章讨论Bootstrap的js插件的折叠效果(bootstrap-collapse.js),即控制页面某一区域内容的显示和隐藏。通过将多个这样的折叠元素组合起来,我们就可以实现诸如手风琴或是导航栏这样的复杂...

doliangzhe
2013/05/19
0
2
怎样用js为页面添加复杂元素?

有时我们要根据需要用js为页面添加新的元素,比如下面这种效果: 我知道的做法有两个:1、用js把元素组装好再显示出来。2、在页面里预先隐藏好一个模板,需要时用js将模板复制一份,填上数据...

水牛叔叔
2012/07/23
839
4
完全开源的App开发框架WeX5之数据绑定02:visible绑定

上周分享了WeX5数据绑定(Data Bindings)的初步体验(点击查看);现继续跟小伙伴们分享WeX5数据绑定之visible绑定。 (提示:WeX5是一个彻底开源的app开发框架,每行源代码都可以自己改;能开...

WeX5移动开发云
2015/03/26
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

老男孩 - python函数编程day2

mark

以谁为师
7分钟前
0
0
【58沈剑 架构师之路】缓存,究竟是淘汰,还是修改?

允许cache miss的场景,不管是memcache还是redis,当被缓存的内容变化时,是修改缓存,还是淘汰缓存?这是今天将要讨论的话题。 问:KV缓存都缓存了一些什么数据? 答: (1)朴素类型的数据...

张锦飞
9分钟前
0
0
Spring异常之Druid – unregister mbean error set JAVA_OPTS="-Ddruid.registerToSysProperty=true"

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
10分钟前
0
0
数据结构-图-知识点总结

一、基本术语 图(graph):图是由顶点的有穷非空集合和顶点之间边的集合组成,通常表示为:G(V,E),其中,G表示一个图,V是图G中的顶点的集合,E是图G中边的集合。 顶点(Vertex):图中的数据...

hblt-j
13分钟前
0
0
SAP订单编排和流程增强概述

SAP产品里的订单处理,无论是On-Premises解决方案还是云产品,我认为归根到底可以概括成四个字:订单编排,包含两个层次的内容: 1. 单个订单通过业务流程或者工作流驱动的状态迁移; 2. 多种...

JerryWang_SAP
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部