当前位置: 首页 > 编程笔记 >

jquery中show()、hide()和toggle()用法实例

云飞翮
2023-03-14
本文向大家介绍jquery中show()、hide()和toggle()用法实例,包括了jquery中show()、hide()和toggle()用法实例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了jquery中show()、hide()和toggle()用法。分享给大家供大家参考。具体分析如下:

这里介绍了jquery效果:show()方法、hide()方法和toggle()方法
现实应用场景:QQ面板里我的好友分组

<html>

<head>

<title>jquery效果:show()方法、hide()方法和toggle()方法</title>

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

<script type="text/javascript">

$(document).ready(function(){

 $("#show").click(function(){

  $("p").show();

 });

 $("#hide").click(function(){

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

 });

 $("#tog").click(function(){

  $("p").toggle("slow");

 });

});

</script>

</head>

<body>

<button id="show">显示</button><button id="hide">隐藏</button><button id="tog">切换</button>

<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

 类似资料:
  • 本文向大家介绍Jquery中使用show()与hide()方法动画显示和隐藏图片,包括了Jquery中使用show()与hide()方法动画显示和隐藏图片的使用技巧和注意事项,需要的朋友参考一下 (1)功能描述 在页面中单击“显示”连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式;单击已显示的图片时,通过hide()以动画的方式隐藏该图片。

  • 我正在编写一个网页,它将有三个隐藏在div中的相应问题的表单--我在bootstrap的框架中使用了一个简单的.accordion-toggle来实现这个功能。 > 当用户选择“Ask a Question”按钮时,它会向下切换(使用.accordion-toggle)并出现一个表单-使用hide(),“Ask a Question”链接将消失。 表单将有一个提交按钮来发布表单,但也有一个取消链接

  • 本文向大家介绍浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别,包括了浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别的使用技巧和注意事项,需要的朋友参考一下 hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数

  • 本文向大家介绍jQuery中toggle()函数的使用实例,包括了jQuery中toggle()函数的使用实例的使用技巧和注意事项,需要的朋友参考一下 今天遇到一个有趣的例子,将它记录下来。 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的。想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续执行。。 其中试了很多种方法都不行,最后通过读j

  • 本文向大家介绍jQuery中hover方法和toggle方法使用指南,包括了jQuery中hover方法和toggle方法使用指南的使用技巧和注意事项,需要的朋友参考一下 jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover、mouseout;keyup、keydown等 1、hover函数     hover(over,out)一个模仿悬停事件(鼠标移动

  • 本文向大家介绍jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能,包括了jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能的使用技巧和注意事项,需要的朋友参考一下 最近在学习jQuery时接触到了show()、hide()、toggle()函数,于是利用这几个函数练习了一个使元素显示隐藏的案例: 小提示:代码中切换按钮上下的小图标可以在此链接品牌展示

  • 使用自定义效果来隐藏匹配的元素。 如需了解更多有关 .hide() 方法的细节,请查看 API 文档 .hide()。 .hide() 演示 点击按钮预览特效。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 特效 - .hide() 演示</title> <link re

  • 我正在使用PHP循环来制作一个文章列表的模板。但是,我需要隐藏的内容,直到它被点击。问题是,它只影响了第一个内容。就连我也点击了另一个内容。它对第一个内容作出反应。有没有办法单独制作?