jQuery简单实现隐藏以及显示特效

简单的 隐藏以及显示的代码如下：

代码如下:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script 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>
</html>

效果很不错，代码也很简单，希望大家能够喜欢。

赞 (0)

相关推荐

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • jQuery仅用3行代码实现的显示与隐藏功能完整实例

    jQuery仅用3行代码实现的显示与隐藏功能完整实例

    本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能.分享给大家供大家参考.具体如下: jQuery技术相当好使用,的确可以用很少的代码实现想要的功能,比如这款经常用到的"显示"与"隐藏"的功能,只需要3行代码就实现了,确实够给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/ 具体代码如下: <!doctype html>

  • jQuery控制TR显示隐藏的三种常用方法

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td>这行不隐藏</td></tr> <tr id="tr_1"><td>这行要隐藏</td></tr> <tr id="tr_2"><td>这行要隐藏</td>

  • Javascript与jQuery方法的隐藏与显示

    示例代码很简单,直接奉上,就不多废话了 复制代码 代码如下: <html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jqu

  • JQuery显示隐藏页面元素的方法总结

    在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. 复制代码 代码如下: $(".btn2").click(function(){   $("p").show(); }); toggle()方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏

  • jQuery仿淘宝网产品品牌隐藏与显示效果

    jQuery仿淘宝网产品品牌隐藏与显示效果

    本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • jQuery元素的隐藏与显示实例

    本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>      <script type="text/jscript" src="jquery/jqu

  • jQuery简单实现隐藏以及显示特效

    简单的 隐藏以及显示的代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){   $("#hide").click(function

  • jQuery实现侧边栏隐藏与显示的方法详解

    jQuery实现侧边栏隐藏与显示的方法详解

    本文实例讲述了jQuery实现侧边栏隐藏与显示的方法.分享给大家供大家参考,具体如下: web项目中经常会出现左侧侧边栏,右侧显示内容的web页面. 效果如图: 如何实现点击本周食谱,本周食谱的列表隐藏或显示切换,并关闭下周食谱列表显示,点击下周食谱,让下周食谱的列表隐藏切换显示,并关闭本周食谱列表显示 实现思路: 1.布局: 布局顶部的topDiv,左侧的leftDiv(optionDiv,navListUl), 布局右侧的contentDiv. 布局如图: 2.js控制optionDiv和n

  • jQuery控制元素隐藏和显示

    1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); //点击id="hide"元素时,隐藏所有<p>标签内容: $("#show").click(function(){ $("p").show(); }); //点击id=

  • JQuery DIV 动态隐藏和显示的方法

    1. 如果在载入是隐藏: <head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()"> </body> 2. 动态

  • jQuery实现切换隐藏与显示同时切换图标功能

    HTML代码: <!doctype html> <html> <head> <meta charset=" utf-8"> <title>jq隐藏显示图标切换</title> <!--引入jq文件--> <script type="text/javascript" scr="./js/jquery.min.js"></script> <

  • JS实现“隐藏与显示”功能(多种方法)

    JS实现“隐藏与显示”功能(多种方法)

    下面我将效果图展示出来: 1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通过按钮实现隐藏和显示</title> <style type="text/css"> .body{ margin: 0 auto; } #show{ wid

  • Android 使用jQuery实现item点击显示或隐藏的特效的示例

    本文介绍了Android 使用jQuery实现item点击显示或隐藏的特效的示例,分享给大家,具体如下: 效果图 分析 上图中的功能在很多APP上都可能用到过,例如app的帮助界面,告诉用户如何使用APP 一般的实现方式都是通过ListView来实现的,实际上此类需求非常简单,完全可以用WebView加载HTML来实现 抽屉样式的显示隐藏特效可以使用jQuery来实现,一个函数就可以搞定 实现 集成jQuery 网页中需要使用到jQuery,最新版本可以去官网下载 http://jquery.c

  • jQuery简单实现列表隐藏和显示效果示例

    jQuery简单实现列表隐藏和显示效果示例

    本文实例讲述了jQuery简单实现列表隐藏和显示效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏和显示</title> <style> *{ padding: 0; margin: 0;} li{ list-style-type: none;} bo

随机推荐