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

2019-11-20 12:39:19

字體：大中小

供稿：網(wǎng)友

例子

$("#top_notice").css("display", "block");//第1種方法  
//$("#top_notice").attr("style", "display:block;");//第2種方法  
//$("#top_notice").show();//第3種方法  

1.給元素?fù)Qclass，來(lái)實(shí)現(xiàn)隱藏div，前提是換的class樣式定義好了隱藏屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

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
       }
   );

僅供大家參考！

上一篇：jquery插件bxslider用法實(shí)例分析

下一篇：JQuery顯示隱藏頁(yè)面元素的方法總結(jié)