jquery经典实例之显示隐藏

Love The Way You Lie 2021-07-24 18:13 453阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="gbk">
        <title>显示隐藏</title>
        <style>
            #show,#content,#hide,#toggle{
                padding: 2px;
                text-align: center;
                background-color: skyblue;
                border:solid 1px green;
    			width:100px;
            }
            #content{
                padding: 100px;
                display: none;
            }
        </style>
    </head>
    <body>
    
        <div id="show">显示</div>
        <div id="hide">隐藏</div>
        <div id="toggle">toggle</div>
        <div id="content">显示隐藏的内容</div>
    
        <script src="jquery-1.5.1.js"></script>
        <script>
            $(document).ready(function(){
                  $("#show").click(function(){
                     $("#content").slideDown(800);
                  });
                  $("#hide").click(function(){
                     $("#content").slideUp(800);
                  });
                  $("#toggle").click(function(){
                     $("#content").slideToggle(800);
                  })
              });
        </script>
    
    </body>
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/b874914b0ede47788b9401119846e3e7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，453人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery控制隐藏显示切换

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"

缺乏、安全感/ 2023年06月11日 04:22/ 0 赞/ 24 阅读

相关前端实例8——隐藏和显示下拉栏实例（JS，jQuery）

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

梦里梦外;/ 2023年03月01日 12:22/ 0 赞/ 54 阅读

相关 JQuery隐藏和显示效果

1：引用插件jquery-3.2.1.min.js： 2：为了方便看出效果和美观，在外层放一个div盒子，给这个盒子设置一些样式：比如边距，边框，宽，高，

朴灿烈づ我的快乐病毒、/ 2021年12月20日 13:55/ 0 赞/ 374 阅读

相关 jquery经典实例之回到顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

野性酷女/ 2021年07月25日 02:36/ 0 赞/ 451 阅读

相关 jquery经典实例之放大镜

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Ty

逃离我推掉我的手/ 2021年07月24日 19:27/ 0 赞/ 476 阅读

相关 jquery经典实例之拖动面板

<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK">

ゝ一世哀愁。/ 2021年07月24日 18:55/ 0 赞/ 387 阅读

相关 jquery经典实例之图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

太过爱你忘了你带给我的痛/ 2021年07月24日 18:31/ 0 赞/ 400 阅读

相关 jquery经典实例之显示隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="gbk">

Love The Way You Lie/ 2021年07月24日 18:13/ 0 赞/ 454 阅读

相关 jquery经典实例之左侧菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

￡神魔★判官ぃ/ 2021年07月24日 16:11/ 0 赞/ 428 阅读

相关 jquery经典实例之选项卡

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

快来打我*/ 2021年07月24日 15:57/ 0 赞/ 432 阅读