jquery實作控制項隱藏顯示-前端問答-PHP中文網

jquery實作控制項隱藏顯示

PHPz

發布： 2023-05-24 21:22:05

原創

701 人瀏覽過

jQuery是一種受歡迎的JavaScript函式庫，在前端開發中有著廣泛的應用。本文將介紹如何使用jQuery實作控制項的隱藏和顯示。

首先，我們需要在HTML頁面中引入jQuery函式庫。可以選擇線上引入或下載本地引入。

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

登入後複製

接著，在需要隱藏或顯示的控制項上新增一個ID或Class，以便可以在jQuery中選擇並操作它們。

<div id="myDiv">
    这是需要隐藏或显示的内容
</div>

<button class="myButton">点击显示/隐藏</button>

登入後複製

新增了ID為"myDiv"的DIV和一個Class為"myButton"的按鈕。

然後，在JavaScript程式碼中使用jQuery的方法選擇需要顯示或隱藏的控件，並新增對應的CSS屬性。

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
    });
});

登入後複製

首先，我們在文件準備好後使用$(document).ready()方法，以確保頁面元素載入完畢後再執行程式碼。

然後，我們透過選擇器$(".myButton")選擇按鈕，為該按鈕新增一個click事件。當按鈕被點擊時，會執行回呼函數。

在回呼函數中，我們使用選擇器$("#myDiv")選擇需要隱藏或顯示的DIV，並使用toggle()方法切換它的顯示狀態。此方法會自動修改CSS屬性"display"的值，使元素顯示或隱藏。

如果需要更精細的控制，可以使用show()和hide()方法分別顯示和隱藏元素。

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
        // $("#myDiv").show();
        // $("#myDiv").hide();
    });
});

登入後複製

以上就是使用jQuery實作控制項的隱藏和顯示的方法。透過選擇器和CSS屬性的修改，我們可以快速控制頁面元素的顯示狀態，使互動更加友善和靈活。

以上是jquery實作控制項隱藏顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

jquery實作控制項隱藏顯示