JQ 内容的显示与隐藏

SinhaengHhjian 2016-11-19

<!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>

 效果图:
JQ 内容的显示与隐藏
 

<!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>

 效果图:
JQ 内容的显示与隐藏
 

<!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>

 效果图:
JQ 内容的显示与隐藏
 

<!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>

 效果图:
JQ 内容的显示与隐藏
 

相关推荐

qsdnet我想学编程 / 0评论 2019-10-24
海欣海夜 / 0评论 2015-08-27