jquery实现展示与隐藏效果的两种方法

方法一:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #body {width: 100px; height: 100px; background: #eee;}
        </style>
    </head>
    <body>
        <input type="button" name="" id="show" value="显示" />
        <input type="button" name="" id="hide" value="隐藏" />
        <div id="text">hello world!<div>
    </body>
</html>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //show()显示内容  hide()隐藏内容
    //注意:不要把botton放在要控制显示与隐藏内容的后面, 否则可能会把botton也隐藏
    $(function() {
        $('#show').click(function() {
            $('#text').show();
        });
        $('#hide').click(function() {
            $('#text').hide();
        });
    });
</script>

 

方法二:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #div1 {width: 100px; height: 100px; background: #EEEEEE;}
        </style>
    </head>
    <body>
        <div id="body">
            <input type="button" name="sh" id="sh" value="显示与隐藏" />
            <div id="div1">hello world!</div>
        </div>
    </body>
</html>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function() {
        $('#sh').click(function() {
            $('#div1').toggle();
        });
    });
</script>

 

posted on 2019-10-28 17:13  哈哈哈天蝎  阅读(477)  评论(0)    收藏  举报

导航