JQuery显示、隐藏div的几种方法简明总结


Posted in Javascript onApril 16, 2015

<div id="demo">AAA</div>

JS隐藏和显示div的方式有两种:

方式1:隐藏后释放占用的页面空间

通过设置display属性可以使div隐藏后释放占用的页面空间.

style="display: none;"
document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="";//显示

方式2:隐藏后仍占有页面空间,显示空白

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.
style="visibility: none;"
document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示

注意:

使用第二方式更人性化,但是,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。

jQuery隐藏和显示div的方式

1、$("#demo").attr("style","display:none;");//隐藏div
   $("#demo").attr("style","display:block;");//显示div
2、$("#demo").css("display","none");//隐藏div
   $("#demo").css("display","block");//显示div
3、$("#demo").hide();//隐藏div
   $("#demo").show();//显示div
4、$("#demo").toggle(//动态显示和隐藏
     function () { 
       $(this).attr("style","display:none;");//隐藏div
     },
     function () {  
       $(this).attr("style","display:block;");//显示div
     }
   );
    <div id="demo"></div>

注:

$("#demo").show()表示display:block,
$("#demo").hide()表示display:none;

1和2中的display:none可以换成visibility:hidden,display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间,而后者隐藏后会占空间

下面是三水点靠木小编补充几个例子

$("#top_notice").css("display", "block");//第1种方法 
//$("#top_notice").attr("style", "display:block;");//第2种方法 
//$("#top_notice").show();//第3种方法 

1.给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性

$("#sendPhoneNum").attr("class", "n_input3"); 

1.2给元素设置style属性

$("#top_notice").attr("style", "display:block;"); 

2.通过jquery的css方法,设置div隐藏

$("#sendPhoneNum").css("display", "none"); 

3.通过jquery的show()、hide()方法,设置div隐藏

$("#textDiv").show();//显示div  

$("#imgDiv").hide();//隐藏div 

在程序设计中经常用到div的显示和隐藏,下面总结几种方法:

<div id='demo'>示例</div>

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

   $("#demo").attr("style","display:block;");//显示div

2、$("#demo").css("display","none");//隐藏div

   $("#demo").css("display","block");//显示div

3、$("#demo").hide();//隐藏div

   $("#demo").show();//显示div

4、$("#demo").toggle(

       function () {

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

       },

       function () {

            $(this).attr("style","display:block;");//显示div

       }

   );

 
仅供大家参考!
Javascript 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 #Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 #Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 #Javascript
jQuery Ajax使用实例
Apr 16 #Javascript
javascript等号运算符使用详解
Apr 16 #Javascript
php常见的页面跳转方法汇总
Apr 15 #Javascript
jquery图片切换实例分析
Apr 15 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php实现的xml操作类
2016/01/15 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PHP进程通信基础之信号
2017/02/19 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
小程序实现选择题选择效果
2018/11/04 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
浅谈python中的占位符
2017/11/09 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
结婚邀请函范文
2014/01/14 职场文书
烹饪自我鉴定
2014/03/01 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
计划生育汇报材料
2014/12/26 职场文书
银行稽核岗位职责
2015/04/13 职场文书
恋恋笔记本观后感
2015/06/16 职场文书