美文网首页
2019-04-30show()和Hide()使用显示隐藏

2019-04-30show()和Hide()使用显示隐藏

作者: 果冻_4c9b | 来源:发表于2019-04-30 16:49 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                //              $('#btn1').click(function() {
                //                  $('p[class="bg"]').appendTo($('#box2'));
                //                  $('p').attr('class', '');
                //              })   
                $('button').eq(0).click(function() {
                    $('#box1').hide();
                })  
                $('button').eq(1).click(function() {
                    $('#box1').show();
                })
            })
        </script>
        <style type="text/css">
            div {
                display: inline-block;
                border: 1px solid #000000;
                width: 100px;
                height: 200px;
                vertical-align: middle;
            }
            .bg {
                background: #FF0000;
            }
            p {
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <p>1111</p>
            <p>2222</p>
            <p>3333</p>
        </div>
        <button id="btn1" type="button">>></button>
        <button id="btn2" type="button"><<</button> 

    </body>
</html>

相关文章

网友评论

      本文标题:2019-04-30show()和Hide()使用显示隐藏

      本文链接:https://www.haomeiwen.com/subject/cxbvnqtx.html