[JS]jq显示/隐藏/切换div

Jquery是一个javascript的框架,操作起来十分方便。

show:显示
hide:隐藏
toggle:切换

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<script type="text/javascript">
    $(function(){
        $("#a1").click(function(){
            $("#d").hide();
        });
        $("#a2").click(function(){
            $("#d").show();
        });
        $("#a3").click(function(){
            $("#d").toggle();
        });
    });
</script>
<body>
    <input type="button" id="a1" value="隐藏">
    <input type="button" id="a2" value="显示">
    <input type="button" id="a3" value="切换">
    <div id="d">
        我出来啦!!!
    </div>
</body>
</html>

效果


 

也可以加上毫秒值,这些显示出来会有延迟效果。

<script type="text/javascript">
    $(function(){
        $("#a1").click(function(){
            $("#d").hide(1000);
        });
        $("#a2").click(function(){
            $("#d").show(1000);
        });
        $("#a3").click(function(){
            $("#d").toggle(1000);
        });
    });
</script>

效果


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 xiaoxin1218@qq.com

文章标题:[JS]jq显示/隐藏/切换div

文章字数:192

本文作者:周信

发布时间:2019-10-08, 22:28:40

最后更新:2023-05-03, 10:25:35

原始链接:http://zx21.xyz/2019/10/08/JS-jq显示-隐藏-切换div/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

可为我打赏鼓励~