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

Web js

创建时间:2019-10-08 22:28

字数:192 阅读:

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