亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)

 更新時(shí)間:2015年04月16日 09:12:42   投稿:junjie  
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下

<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樣式定義好了隱藏屬性

復(fù)制代碼 代碼如下:

$("#sendPhoneNum").attr("class", "n_input3"); 

1.2給元素設(shè)置style屬性

復(fù)制代碼 代碼如下:

$("#top_notice").attr("style", "display:block;"); 

2.通過jquery的css方法,設(shè)置div隱藏

復(fù)制代碼 代碼如下:

$("#sendPhoneNum").css("display", "none"); 

3.通過jquery的show()、hide()方法,設(shè)置div隱藏

復(fù)制代碼 代碼如下:

$("#textDiv").show();//顯示div 
$("#imgDiv").hide();//隱藏div 

在程序設(shè)計(jì)中經(jīng)常用到div的顯示和隱藏,下面總結(jié)幾種方法:

復(fù)制代碼 代碼如下:

<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)文章

最新評(píng)論