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 相关文章推荐
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 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
php实现ping
2006/10/09 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
javascript实现下雨效果
2017/03/27 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
python字典排序实例详解
2015/05/20 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
pyspark 随机森林的实现
2020/04/24 Python
python调用私有属性的方法总结
2020/07/24 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
个人自我剖析材料
2014/02/07 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
二审答辩状格式
2015/05/22 职场文书
付款证明模板
2015/06/19 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技