zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    刷题-力扣-152. 乘积最大子数组
    刷题-力扣-剑指 Offer II 088. 爬楼梯的最少成本
    刷题-力扣-剑指 Offer II 003. 前 n 个数字二进制中 1 的个数
    刷题-力扣-LCS 01. 下载插件
    刷题-力扣-剑指 Offer 10- II. 青蛙跳台阶问题
    20191107-3 beta week 2/2 Scrum立会报告+燃尽图 02
    beta week 2/2 Scrum立会报告+燃尽图 01
    版本控制报告
    20191031-9 beta week 1/2 Scrum立会报告+燃尽图 07
    扛把子组20191031-2 Beta阶段贡献分配规则
  • 原文地址:https://www.cnblogs.com/songtianfa/p/11289072.html
Copyright © 2011-2022 走看看