JQ 内容的显示与隐藏

onestopweb

浏览: 677998 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

境-JS

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>简单的jQuery hide()方法演示。</title>
</head>
<body>
<p>点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
<script src="js/jquery-1.10.1.min.js" ></script>
<script>
$(function(){
	$("p").click(function(){
		$(this).hide();
	});
});
</script>
</body>
</html>

效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>另一个hide()实例。演示如何隐藏文本。</title>
</head>
<body>
<style type="text/css">
div.ex {
	background-color: #e5eecc;
	padding: 7px;
	border: solid 1px #c3c3c3;
}
</style>
<h3>一站式网络</h3>
<div class="ex">
	<button class="hide">点我隐藏</button>
	<p>阅谁问君诵，水落清香浮。1<br> 站点 URL：http://onestopweb.iteye.com</p>
</div>
<h3>一站式网络</h3>
<div class="ex">
	<button class="hide">点我隐藏</button>
	<p>阅谁问君诵，水落清香浮。2<br> 站点 URL：http://onestopweb.iteye.com</p>

</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(function() {
	$(".ex .hide").click(function() {
		$(this).parents(".ex").hide("slow");
	});
});
</script>
</body>
</html>

效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。</title>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(function() {
	$("#hide").click(function(){
		$("p").hide(600);
	});
	$("#show").click(function(){
		$("p").show(600);
	});
});
</script>
</body>
</html>

效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。</title>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(function() {
	$("button").click(function(){
		$("p").toggle(600);
	});
});
</script>
</body>
</html>

效果图：