`
hsys
  • 浏览: 290900 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Jquery show hide toggle

jQueryHTML 
阅读更多 

<html>
<head>
<title>show hide toggle</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$("#show").click(function(){
			$("#showDiv").show(1000,alert(100));
		});
		$("#hide").click(function(){
			$("#showDiv").hide(1000,alert(200));
		});
		$("#toggle").click(function(){
			$("#showDiv").toggle(1000,alert(300));
		});
	});
</script>
<style>
	.showDiv
	{
		width:200px;
		height:200px;
		border:1px red solid;
	}
</style>
</head>

<body>

<div class="showDiv" style="display:none;" id="showDiv">show and hide</div>
<p style="display: none">Hello</p>

<input type="button" value="Show" id="show" />
<input type="button" value="Hide" id="hide" />
<input type="button" value="Toggle" id="toggle" />
</body>
</head>


分享到：
| 兼容FireFox和IE8的设为首页和添加收藏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

    本篇文章主要介绍jQuery中三种非常实用的方法：hide()、show()和toggle()，用于实现元素的隐藏、显示以及切换显示状态。 首先，让我们看一下show()方法。在上述代码中，show()方法用来显示元素。show()可以接受一个...

    jQuery显示隐藏密码插件jquery.toggle-password

    本文将深入探讨“jQuery显示隐藏密码插件jquery.toggle-password”，这是用于增强网页表单用户体验的一个实用工具，尤其对于那些关注隐私和安全性的用户来说。 ### jQuery基础 在了解这个插件之前，我们先来回顾...

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

    jQuery提供了许多方法来操作DOM元素的显示和隐藏状态，其中最为常用的三个方法是show()、hide()和toggle()。下面详细介绍这三个方法的用法、特点以及相关实例。 ### show()方法 show()方法用于显示被隐藏的匹配元素...

    【JavaScript源代码】jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能.docx

    ### 使用jQuery中的`hide()`、`toggle()`函数实现相机品牌展示隐藏功能 #### 一、概述 在Web开发中，动态地控制元素的显示与隐藏是常见需求之一。通过使用jQuery库提供的`hide()`和`toggle()`等方法，开发者能够...

    Jquery的hide及toggle方法让超链接慢慢消失

    综合上述内容，我们了解到，通过jQuery提供的hide方法和toggle方法，可以轻松地为网页元素添加视觉上的动画效果。这对于提升用户体验、使界面更加友好非常有帮助。然而，值得注意的是，在使用这些方法时，要确保它们...

    jQuery使用hide方法隐藏元素自身用法实例

    结合其他jQuery方法，如`show()`、`toggle()`，我们可以创建更复杂的交互效果，比如在点击后显示隐藏的内容或者在特定条件下切换元素的可见性。 总结来说，jQuery的`hide()`方法是一个强大的工具，它可以轻松地实现...

    jQuery中show与hide方法用法示例

    在jQuery库中，`show()`和`hide()`是两个非常基础且常用的动画方法，用于控制DOM元素的可见性。这两个方法使得开发者能够轻松地在页面上实现元素的显示和隐藏，通常与用户交互如点击按钮、链接等行为相结合，以增强...

    jQuery toggle事件制作FAQ列表页.zip

    2. **DOM操作**：jQuery提供了一系列方便的DOM操作方法，如`$(selector).hide()`, `$(selector).show()`和`$(selector).toggle()`. 这些方法用于改变元素的可见性，而无需直接处理CSS的display属性。在FAQ页面中，`...

    jQuery使用hide方法隐藏页面上指定元素的方法

    页面中还包含了对jQuery库的引用，这是使用`hide()`方法的前提，因为`hide()`是jQuery库中的一个函数。 具体实现隐藏元素的JavaScript代码如下： ```javascript $(document).ready(function(){ $("button").click...

    页面元素绑定jquery toggle后元素隐藏的解决方法

    在使用jQuery库时，开发者可能会遇到元素在绑定toggle方法后不显示的问题。这个问题在不同版本的jQuery中有着不同的表现和解决方法。我们首先需要了解jQuery的toggle方法的作用，然后分析为什么在新版本中会导致元素...

    jQuery复合事件结合toggle()方法的用法示例

    `toggle()`方法不仅可以结合`show()`和`hide()`，还可以与其他jQuery方法或自定义函数配合使用。例如，你可以添加更多的事件处理，或者在切换时改变元素的样式、内容等。 ### JavaScript事件对照表 为了更好地理解...

    jquery中toggle函数交替使用问题

    jQuery的toggle()函数是用于切换元素的可见状态的。它主要使用show()或hide()函数来实现元素的显示和隐藏。然而在使用过程中，有时会出现一些问题，比如今天我们要探讨的toggle函数交替使用问题。 首先，我们需要...

    jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

    在本文中，我们将深入探讨使用jQuery中的toggle方法来实现点击事件控制DIV元素显示与隐藏的机制，并通过实例来分析实现过程中的相关技巧。jQuery作为一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、...

    jquery 隐藏显示行

    除了 `hide()` 和 `show()`，jQuery 还提供了一个更灵活的方法 `toggle()`，它可以交替执行隐藏和显示操作： ```javascript $("tr").click(function() { $(this).toggle(); }); ``` 上面的代码将为每个表格行添加...

    jQuery隐藏样案例

    首先，jQuery提供了`hide()`、`show()`和`toggle()`三个主要函数来处理元素的显示和隐藏状态。`hide()`方法用于隐藏选定的元素，`show()`则用来显示它们，而`toggle()`可以在隐藏和显示之间切换元素的状态。 1. `...

    jQuery的帮助文档

    在jQuery中，`hide()`、`show()`、`toggle()`以及动画函数`animate()`等都可以接受一个callback函数作为参数。这个callback函数通常会在动画或动作完成后被触发执行，比如在元素完全显示或隐藏后需要执行的额外代码...

    jquery实现隐藏和显示实例

    通过选择器选取元素，然后调用`hide()`、`show()`或`toggle()`方法，可以轻松实现各种动态效果。结合适当的动画速度和条件判断，你可以创建出更加丰富的用户体验。在实际开发中，熟练掌握这些技巧对提升网页的交互性...

Magicbox
Global site tag (gtag.js) - Google Analytics