JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
<div id="demo">AAA</div>
JS隱藏和顯示div的方式有兩種:
方式1:隱藏后釋放占用的頁面空間
通過設(shè)置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"隱藏會(huì)引起,div里面的東西休眠,里面的事件就不響應(yīng)了。
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(//動(dòng)態(tài)顯示和隱藏 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.兩者的區(qū)別是前者隱藏后不占空間,而后者隱藏后會(huì)占空間
下面是腳本之家小編補(bǔ)充幾個(gè)例子
$("#top_notice").css("display", "block");//第1種方法
//$("#top_notice").attr("style", "display:block;");//第2種方法
//$("#top_notice").show();//第3種方法
1.給元素?fù)Qclass,來實(shí)現(xiàn)隱藏div,前提是換的class樣式定義好了隱藏屬性
$("#sendPhoneNum").attr("class", "n_input3");
1.2給元素設(shè)置style屬性
$("#top_notice").attr("style", "display:block;");
2.通過jquery的css方法,設(shè)置div隱藏
$("#sendPhoneNum").css("display", "none");
3.通過jquery的show()、hide()方法,設(shè)置div隱藏
$("#textDiv").show();//顯示div
$("#imgDiv").hide();//隱藏div
在程序設(shè)計(jì)中經(jīng)常用到div的顯示和隱藏,下面總結(jié)幾種方法:
<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
}
);
僅供大家參考!
相關(guān)文章
基于Jquery的將DropDownlist的選中值賦給label的實(shí)現(xiàn)代碼
使用Jquery 將DropDownlist的選中值賦給label的代碼,需要的朋友可以參考下。2011-05-05PHP結(jié)合jQuery實(shí)現(xiàn)的評(píng)論頂、踩功能
本文給大家分享的功能是這樣的:你點(diǎn)擊一下頂或踩按鈕,記錄數(shù)值到數(shù)據(jù)庫,并且有顏色的背景跟著變,按照百分比的變化。這樣就可以通過背景顏色一眼就看清楚那邊支持的人比較多。2015-07-07在jQuery1.5中使用deferred對(duì)象 著放大鏡看Promise
在那篇經(jīng)典的關(guān)于jQuery1.5中Deferred使用方法介紹的文章中(譯文見這里),有下面一段描述2011-03-03jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉×
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉× 的相關(guān)資料,需要的朋友可以參考下2016-05-05QRCode.js:基于JQuery的生成二維碼JS庫的使用
本篇文章主要介紹了QRCode.js:基于JQuery的生成二維碼JS庫的使用,具有一定的參考價(jià)值,有興趣的同學(xué)可以了解一下2017-06-06Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫query獲取第一個(gè)子元素簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jQuery dialog 異步調(diào)用ashx,webservice數(shù)據(jù)的代碼
點(diǎn)擊按鈕,在彈出的jQuery.dialog中,顯示異步返回的數(shù)據(jù)。WebService可以寫復(fù)雜的函數(shù),ashx可以根據(jù)傳過來的參數(shù)調(diào)用不同的方法,達(dá)到同樣的效果。2010-08-08