jQuery 效果- 隐藏和显示

作者：System 时间：2024年08月07日分类：所有,jquery 字数：881




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 效果示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #myDiv {
            width: 100px;
            height: 100px;
            background: red;
            display: none;
        }
    </style>
</head>
<body>
    <button id="showBtn">显示</button>
    <button id="hideBtn">隐藏</button>
    <div id="myDiv"></div>
 
    <script>
        $(document).ready(function() {
            $('#showBtn').click(function() {
                $('#myDiv').show();
            });
            $('#hideBtn').click(function() {
                $('#myDiv').hide();
            });
        });
    </script>
</body>
</html>

这段代码展示了如何使用jQuery来控制一个元素的显示和隐藏。当用户点击"显示"按钮时，关联的函数会使#myDiv元素显示出来；点击"隐藏"按钮时，#myDiv元素会被隐藏。这是jQuery中最基本的效果控制方法。

jQuery 效果- 隐藏和显示

评论已关闭

推荐阅读