頁面元素隱藏和顯示

2021-06-27 11:50:32 字數 1386 閱讀 6103

一、jquery hide() 和 show()

通過 jquery,您可以使用 hide() 和 show() 方法來隱藏和顯示 html 元素:

$("#hide").click(function());

$("#show").click(function());

語法:$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的callback 引數是隱藏或顯示完成後所執行的函式名稱。

下面的例子演示了帶有speed 引數的 hide() 方法: 例項

$("button").click(function());

jquery.toggle()

通過 jquery,您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素,並隱藏已顯示的元素: 例項

$("button").click(function());

語法:$(selector).toggle(speed,callback);

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的callback 引數是 toggle() 方法完成後所執行的函式名稱。

二、css元素隱藏display:none和visibility:hidden

1、$(「#id」).css(「display」,「none」)

display屬性設定元素的顯示方式,可選值為none、block和inline:

none隱藏元素,不保留元素顯示時的空間。

block塊方式顯示元素。

inline以內嵌方式顯示元素。

2、$(「#id」).css(「visibility」,「hidden」)

visibility屬性設定是否顯示元素,可選值為inherit、hidden和visible:

inherit繼承父元素的visibility屬性設定。

hidden隱藏元素,但保留其所佔空間。

visible顯示元素(預設值)。

display:none;時隱藏該html元素,確切的說,是在瀏覽器中消除該元素,不佔螢幕的空間。若其下有其他元素,就會上移到該空間區域。

dispaly:block;顯示已經隱藏的html元素,如果別的元素占有了該空間時,他將下移,空間重新別原來的元素占有。

visibility:hidden;隱藏該元素,真正的隱藏,但他還占有那塊空間。

visibility:visible;讓元素顯示。

4 2 隱藏和顯示元素

基本的.hide 和.show 方法不帶任何引數。可以把它們想象成類似.css display string 方法的簡寫方式,其中string是適當的顯示值。不錯,這兩個方法的作用就是立即隱藏或顯示匹配的元素集合,不帶任何動畫效果。其中,hide 方法會將匹配的元素集合的內聯style屬性設定為di...

元素的顯示和隱藏

一 display 屬性 用於設定乙個元素應如何顯示 display none 隱藏物件 display block 除了轉換為塊級元素之外,同時還有顯示元素的意思。隱藏元素後,不再占有原來的位置 二 visibility 用於指定乙個元素應可見還是隱藏 visibility hidden 元素隱藏...

JQuery顯示隱藏頁面元素的方法總結

show 方法 顯示出隱藏的 元素。複製 如下 btn2 click function toggle 方法 toggle 方法切換元素的可見狀態。如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。複製 如下 this is a paragraph.toggle slidedown ...