使用jquery控制div的顯示與隱藏，一句話就能搞定，例如：

 

方法一

顯示：

$("#id").show()表示為display：block，

隱藏：

$("#id").hide()表示為display:none;

 

方法二

$("#id").toggle();

切換元素的可見(jiàn)狀態(tài)。如果元素是可見(jiàn)的，切換為隱藏的；

如果元素是隱藏的，則切換為可見(jiàn)的。

 

方法三

顯示：

$("#id").css('display','block');//顯示

隱藏：

$("#id").css('display','none');//隱藏

或者

$("#id")[0].style.display='none';

display = none 控制對(duì)象的隱藏

display = block控制對(duì)象的顯示

 

方法四：

元素顯示：

$("#id").css('visibility','visible');//元素顯示

元素隱藏：

$("#id").css('visibility','hidden');//元素隱藏

CSS visibility 屬性規(guī)定元素是否可見(jiàn)。
visible 元素可見(jiàn)。 
hidden 元素不可見(jiàn)。 
collapse 在表格元素中使用時(shí)，此值可刪除一行或一列，但它不影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 "hidden"。 
inherit 從父元素繼承 visibility 屬性的值。

注意：

display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)，在視覺(jué)效果上沒(méi)有區(qū)別，但是在一些DOM操作中兩者有區(qū)別:

display:none ---不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁(yè)面上徹底消失，通俗來(lái)說(shuō)就是看不見(jiàn)也摸不到。

visible:hidden--- 使對(duì)象在網(wǎng)頁(yè)上不可見(jiàn)，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒(méi)有改變，即它仍然具有高度、寬度等屬性，通俗來(lái)說(shuō)就是看不見(jiàn)但摸得到。

    


        


            


            

        

        


            

                //第1種方法 ,給元素設(shè)置style屬性 
            

        

    

    


        


            


            

        

        


            

                $("#hidediv").css("display", "block");
            

        

    

    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            

                $("#hidediv").attr("class", "blockclass");
            

        

    

    


        


            


            

        

        


            

                //第3種方法,通過(guò)jquery的css方法，設(shè)置div隱藏 
            

        

    

    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                $("#hidediv").show();//顯示div 
            

        

    

    


        


            


            

        

        


            

                $("#blockdiv").hide();//隱藏div 
            

        

    

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)