JQuery显⽰、隐藏div的⼏种⽅法简明总结
<div id="demo">AAA</div>
JS隐藏和显⽰div的⽅式有两种：
⽅式1：隐藏后释放占⽤的页⾯空间
通过设置display属性可以使div隐藏后释放占⽤的页⾯空间.
⽅式2：隐藏后仍占有页⾯空间，显⽰空⽩
div的visibility可以控制div的显⽰和隐藏，但是隐藏后页⾯显⽰空⽩.
注意：
使⽤第⼆⽅式更⼈性化，但是，⽤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
jquery的attr属性$("#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
}
)
;
仅供⼤家参考！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。