jQuery的顯示和隱藏

本文轉載自查看原文 2019-08-03 10:56 1085 jQuery顯示/ JQuery/ jQuery隱藏

　　在 jQuery 中可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素，以及使用 toggle() 方法能夠切換 hide() 和 show() 方法。

　　隱藏例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jquey隱藏顯示</title>
 6      <!--     jquery文件自己下載引用近來即可，我這里是1.12.0的壓縮版 -->
 7     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
 8     <script type="text/javascript">
 9         $(document).ready(function(){
10            $('p').click(function(){
11                $(this).hide();
12            }) 
13         })
14     </script>
15 </head>
16 <body>
17       <p>點我，消失</p>
18       <p>點我，我也消失</p>
19 </body>
20 </html>

　　通過 jQuery，還可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquey隱藏顯示</title>
    <style>
          div{width:100px;height:100px;border:1px solid red;}
    </style>
     <!--     jquery文件自己下載引用近來即可，我這里是1.12.0的壓縮版 -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $('.show1').click(function(){
               $('div').show(1000);
           }) 
           $('.hide1').click(function(){
               $('div').hide(1000);
           }) 
        })
    </script>
</head>
<body>
    <button class="show1">顯示</button>
    <button class="hide1">隱藏</button>
      <div>
          <p>點我，消失</p>
      <p>點我，我也消失</p>
      </div>
</body>
</html>

　　通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

　　例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jquey隱藏顯示</title>
 6     <style>
 7           div{width:100px;height:100px;border:1px solid red;}
 8     </style>
 9      <!--     jquery文件自己下載引用近來即可，我這里是1.12.0的壓縮版 -->
10     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
11     <script type="text/javascript">
12         $(document).ready(function(){
13           $(".show1").click(function(){
14             $("div").toggle("slow");
15             });
16          });
17     </script>
18 </head>
19 <body>
20     <button class="show1">顯示&隱藏</button>
21       <div>
22           <p>點我，消失</p>
23       <p>點我，我也消失</p>
24       </div>
25 </body>
26 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery的幾種顯示隱藏方法 jquery datatable隱藏和顯示列 JQuery動態隱藏和顯示DIV jquery單擊按鈕顯示或隱藏 jquery顯示隱藏密碼跟顯示密碼 jQuery顯示和隱藏常用的狀態判斷方法 jquery設置table中td隱藏顯示 jquery 實現點擊顯示，再點擊隱藏 jquery實現點擊顯示，再點擊隱藏 jquery控制css的display屬性(顯示與隱藏)