jquery隐藏、显示、切换，滑动，淡入淡出，以及动画

最新推荐文章于 2024-05-01 12:03:21 发布

钝剑出鞘

最新推荐文章于 2024-05-01 12:03:21 发布

阅读量365

点赞数

分类专栏：前端文章标签： jquery html

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

隐藏

标签：

<head>
    <title>jquery1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script src="jquery-1.10.2.min.js">
    </script>   
    <script  language="javascript" type="text/javascript">
    $(document).ready(
    function(){
        $("p").click(
        function(){
        $(this).hide();
        });
    });
    </script>
  </head> 
  <body>
     <p>如果你点我，我就消失1</p>
     <p>如果你点我，我就消失2</p>
     <p>如果你点我，我就消失3</p>
  </body>

<title>jquery2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script src="jquery-1.10.2.min.js">
    </script>   
    <script  language="javascript" type="text/javascript">
    $(document).ready(function(){
      $(".ex .hide").click(function(){
        $(this).parents(".ex").hide("slow");
      });
    });
    </script>
    <style type="text/css"> 
    div.ex
    {
    background-color:#e5eecc;
    padding:7px;
    border:solid 1px #c3c3c3;
    }
    </style>
  </head> 
  <body>
    <h3>中国办事处</h3>
    <div class="ex">
    <button class="hide" type="button">隐藏</button>
    <p>联系人：张先生<br /> 
    北三环中路 100 号<br />
    北京</p>
    </div>

    <h3>美国办事处</h3>
    <div class="ex">
    <button class="hide" type="button">隐藏</button>
    <p>联系人：David<br /> 
    第五大街 200 号<br />
    纽约</p>
    </div>

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<head>
    <title>jquery3.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script src="jquery-1.10.2.min.js">
    </script>   
    <script  language="javascript" type="text/javascript">
    $(document).ready(function(){
      $("#hide").click(function(){
      $("p").hide();
      });
      $("#show").click(function(){
      $("p").show();
      });
    });
    </script>
  </head> 
  <body>
    <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
  </body>

钝剑出鞘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：$("#hide").click(function(){ $("p").hide();});$("#show").click(function(){ $("p").show();});隐藏标签：<head> <title>jquery1.html</title> <meta
复制链接

扫一扫