jquery實現控制div顯示跟隱藏辦法。

2021-10-07 13:59:40 字數 1394 閱讀 3812

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

1.$("#id").show()表示為display:block,

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

2.$("#id").toggle()切換元素的可見狀態。如果元素是可見的,切換為隱藏的;如果元素是隱藏的,則切換為可見的。

3.$("#id").css(『display』,『none』);//隱藏

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

或者$("#id")[0].style.display=『none』;

display=none 控制物件的隱藏搜尋

display=block控制物件的顯示

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

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

css visibility 屬性規定元素是否可見。

visible 元素可見。

hidden 元素不可見。

collapse 在**元素中使用時,此值可刪除一行或一列,但它不影響**的布局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上,會呈現為 「hidden」。

inherit 從父元素繼承 visibility 屬性的值。

注意:display:none和visible:hidden都能把網頁上某個元素隱藏起來,在視覺效果上沒有區別,但是在一些dom操作中兩者有區別:

display:none —不為被隱藏的物件保留其物理空間,即該物件在頁面上徹底消失,通俗來說就是看不見也摸不到。

visible:hidden— 使物件在網頁上不可見,但該物件在網頁上所佔的空間沒有改變,即它仍然具有高度、寬度等屬性,通俗來說就是看不見但摸得到。

//第1種方法 ,給元素設定style屬性  $(

"#hidediv").

css(

"display"

,"block");

//第2種方法 ,給元素換class,來實現隱藏div,前提是換的class樣式定義好了隱藏屬性 $(

"#hidediv").

attr

("class"

,"blockclass");

//第3種方法,通過jquery的css方法,設定div隱藏 $(

"#blockdiv").

css(

"display"

,"none");

$("#hidediv").

show()

;//顯示div $(

"#blockdiv").

hide()

;//隱藏div

使用jquery控制div的顯示與隱藏

id show 表示為display block,或 id hide 表示為display none id toggle 切換元素的可見狀態。如果元素是可見的,切換為隱藏的 如果元素是隱藏的,則切換為可見的。id css display none 隱藏 id css display block 顯示...

jQuery實現「分頁」的效果,控制div分頁顯示

現在有多個div,如果完全顯示在乙個頁面裡,顯得太臃腫。故而需要分頁,下面是我用jquery控制每頁顯示個數的 僅供參考測試!頁面布局 aaaaaa1 aaaaaa2 aaaaaa3 aaaaaa4 aaaaaa5 aaaaaa6 aaaaaa7 aaaaaa8 aaaaaa9 aaaaaa10 a...

JQuery動態隱藏和顯示DIV

1 2 03 04 以上 之前,可能還要加上這句話 使用jquery真的很方便,比如要控制div的顯示與隱藏,一句話就搞定了,請看下面使用說明。id show 表示display block,id hide 表示display none id toggle 切換元素的可見狀態。如果元素是可見的,切換...