当前位置：首页 > jquery

jquery显示隐藏div

2026-04-08 07:47:25jquery

jQuery 显示和隐藏 div 的方法

使用 jQuery 可以轻松地控制 div 元素的显示和隐藏。以下是几种常见的方法：

使用 `show()` 和 `hide()`

show() 方法用于显示元素，hide() 方法用于隐藏元素。

// 显示 div
$("#myDiv").show();

// 隐藏 div
$("#myDiv").hide();

使用 `toggle()`

toggle() 方法可以在显示和隐藏之间切换元素的状态。

// 切换 div 的显示状态
$("#myDiv").toggle();

使用 `fadeIn()` 和 `fadeOut()`

fadeIn() 和 fadeOut() 方法可以实现淡入和淡出的效果。

// 淡入显示 div
$("#myDiv").fadeIn();

// 淡出隐藏 div
$("#myDiv").fadeOut();

使用 `slideDown()` 和 `slideUp()`

slideDown() 和 slideUp() 方法可以实现滑动显示和隐藏的效果。

// 滑动显示 div
$("#myDiv").slideDown();

// 滑动隐藏 div
$("#myDiv").slideUp();

使用 CSS 属性控制

也可以通过直接修改 CSS 的 display 属性来控制显示和隐藏。

// 显示 div
$("#myDiv").css("display", "block");

// 隐藏 div
$("#myDiv").css("display", "none");

示例代码

以下是一个完整的示例，展示如何通过按钮控制 div 的显示和隐藏：

jquery显示隐藏div

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 显示隐藏示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            display: none;
        }
    </style>
</head>
<body>
    <button id="showBtn">显示</button>
    <button id="hideBtn">隐藏</button>
    <button id="toggleBtn">切换</button>
    <div id="myDiv"></div>

    <script>
        $(document).ready(function() {
            $("#showBtn").click(function() {
                $("#myDiv").show();
            });
            $("#hideBtn").click(function() {
                $("#myDiv").hide();
            });
            $("#toggleBtn").click(function() {
                $("#myDiv").toggle();
            });
        });
    </script>
</body>
</html>