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实现禁止后退的方法
Dec 27 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
js获取ip和地区
Mar 10 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
Js面试算法详解
Apr 08 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
网页常用特效代码整理
2006/06/23 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python 读入多行数据的实例
2018/04/19 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
恶搞卫生巾广告词
2014/03/18 职场文书
个人整改措施书面材料
2014/10/24 职场文书
小学生优秀评语
2014/12/29 职场文书
道歉信范文
2015/05/12 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python