您的位置：首页 > Web前端 > JQuery

我的第五课：jQuery 效果 - 隐藏和显示，切换

2014-03-03 00:30 459 查看

jQuery 效果 - 隐藏和显示，切换的代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>

<head>

   <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

   <script type="text/javascript">

      $(document).ready(

         function()

         {

            $("#hide").click(

               function()

               {

               $("p").hide();

               }

            );

         }

      );



   $(document).ready(

       function()

       {

    $("#show").click(

        function()

        {

        $("p").show();

        }

    );

       }

   );

   $(document).ready(

      function(){

         $("#manhide").click(

           function()

           {

              $("p").hide(1000);

           }

         );

      }

   );

   $(document).ready(

       function()

       {

         $("#hideshow").click(

           function()

           {

               $("p").toggle();

           }

         );

       }



   );

   </script>

</head>

<body>

   <p >点击：我要隐藏起来</p>

   <button id="hide" type="button">隐藏</button>

   <button id="show" type="button">显示</button>

   <button id="manhide" type="button">慢慢隐藏</button>

   <button id="hideshow" type="button">隐藏显示</button>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航