[jQuery] 效果:隱藏與顯示

[jQuery] 效果:隱藏與顯示

hide()與show()

hide()與show()方法能夠隱藏與顯示HTML元素:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnHIDE").click(function () {
                $("p").hide();
            });
            $("#btnSHOW").click(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>

    <p>按下按鈕隱藏/顯示</p>

    <button id="btnHIDE">隱藏</button>
    <button id="btnSHOW">顯示</button>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("#btnHIDE").click(function () { } 指派id="btnHIDE"的標籤加上click事件與執行function。

$("p").hide(); 將<p>標籤執行hide()方法,隱藏<p>標籤。

$("#btnSHOW").click(function () { } 指派id="btnSHOW"的標籤加上click事件與執行function。

$("p").show(); <p>標籤執行show()方法,顯示<p>標籤。

 

按下顯示按鈕,顯示<p>標籤:

按下隱藏按鈕,隱藏<p>標籤:

 

語法:

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

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

speed參數用來指定隱藏或顯示的速度。

callback參數是一個function,執行於hide()或show()方法執行完畢後,避免執行其他效果時發生錯誤。

hide()方法與速度:

$(document).ready(function () {
    $("#btnHIDE").click(function () {
        $("p").hide(1000);
    });
    $("#btnSHOW").click(function () {
        $("p").show(1000);
    });
});

 

jQuery toggle()

toggle()方法可以用來切換hide()與show()方法,當隱藏時顯示,顯示時則隱藏。

toggle()方法:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnTOGGLE").click(function () {
                $("p").toggle();
            });
        });
    </script>
</head>
<body>

    <p>按下按鈕隱藏/顯示</p>

    <button id="btnTOGGLE">隱藏/顯示</button>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("#btnTOGGLE").click(function () { } 指派id="btnTOGGLE"的標籤加上click事件與執行function。

$("p").toggle(); 將<p>標籤執行toggle()方法,切換<p>標籤隱藏與顯示。

 

按下顯示按鈕,切換<p>標籤的隱藏與顯示:

 

語法:

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

speed參數用來指定隱藏或顯示的速度。

callback參數是一個function,執行於toggle()方法執行完畢後,避免執行其他效果時發生錯誤。

toggle()方法與速度:

$(document).ready(function () {
    $("#btnTOGGLE").click(function () {
        $("p").toggle(1000);
    });
});

 

 END 

回目錄