<!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>
效果图：