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

来源：互联网发布：德国香肠知乎编辑：程序博客网时间：2024/06/05 09:57

通过 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