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 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js导出txt示例代码
Jan 14 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
Three.js基础学习教程
Nov 16 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 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利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
python简单操作excle的方法
2018/09/12 Python
Python实现Dijkstra算法
2018/10/17 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python3实现点餐系统
2019/01/24 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python3中sys.argv的实例用法
2020/04/24 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
学生会离职感言
2014/02/11 职场文书
计算机专业职业规划
2014/02/28 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
高一语文教学反思
2016/02/16 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs