jq 效果 - 隐藏和显示

最新推荐文章于 2023-10-17 19:53:29 发布

原味蛋挞ms

最新推荐文章于 2023-10-17 19:53:29 发布

阅读量123

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47488699/article/details/106140553

版权

隐藏、显示、切换

1. jQuery hide()和show()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".hide").click(function() {
                $("p").hide(1000);
            })
            $(".show").click(function() {
                $("p").show(1500);
            })
        })
    </script>
</head>
<body>
    <input type="text" id="text"><br>
    <p>如果你点击隐藏按钮，我将消失</p>
    <button class="hide">隐藏</button>
    <button class="show">显示</button>
</body>
</html>

2.jQuery toggle()
可以使用 toggle() 方法来切换 hide() 和 show() 方法。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").toggle("slow");
            })
        })
    </script>
</head>
<body>
    <button>显示/隐藏</button>
    <p>加油</p>
    <p>hhhhhh</p>
</body>
</html>

原味蛋挞ms

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 效果 - 隐藏和显示

隐藏、显示、切换1. jQuery hide()和show()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <scr
复制链接

扫一扫