美文网首页
jq显示隐藏

jq显示隐藏

作者: lucky_yao | 来源:发表于2020-10-27 08:01 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                div{
                    width: 200px;
                    height: 200px;
                    background: #006400;
                }
            </style>
        </head>
        <body>
            <div></div>
            <button type="button">显示</button>
            <button type="button">隐藏</button>
            <button type="button">显示隐藏</button>
        </body>
        <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // $('button').eq(0).click(function(){
            //  $('div').css('display','block')
            // })
            // $('button').eq(1).click(function(){
            //  $('div').show(1000)
            // })
            // $('button').eq(2).click(function(){
            //  $('div').hide(1000)
            // })
            // $('button').eq(2).click(function(){
            //  $('div').toggle(1000,function(){
            //      alert('爱你爱你')
            //  })
            // })
            
            $('button').eq(0).click(function(){
                $('div').slideDown(1000)
            })
            $('button').eq(1).click(function(){
                $('div').slideUp(1000)
            })
            $('button').eq(2).click(function(){
                $('div').slideToggle(1000)
            })
        </script>
    </html>
    
    

    相关文章

      网友评论

          本文标题:jq显示隐藏

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