<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Simple jQuery hide() method demonstration. </title>
</head>
<body>
<p>Click me and I'll disappear. </p>
<p>Continue to click me!</p>
<p>Click me next!</p>
<script src="js/jquery-1.10.1.min.js" ></script>
<script>
$(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</body>
</html>
Effect picture:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Another hide() instance. Demonstrates how to hide text. </title>
</head>
<body>
<style type="text/css">
div.ex {
background-color: #e5eecc;
padding: 7px;
border: solid 1px #c3c3c3;
}
</style>
<h3>One-Stop Network</h3>
<div class="ex">
<button class="hide">Click me to hide</button>
<p>Who asks you to read, the fragrance floats when the water falls. 1<br> Site URL: http://onestopweb.iteye.com</p>
</div>
<h3>One-Stop Network</h3>
<div class="ex">
<button class="hide">Click me to hide</button>
<p>Who asks you to read, the fragrance floats when the water falls. 2<br> Site 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>
Effect picture:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>With jQuery, you can hide and show HTML elements using the hide() and show() methods. </title>
</head>
<body>
<p>If you click the "Hide" button, I will disappear. </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>
Effect picture:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>With jQuery, you can use the toggle() method to toggle the hide() and show() methods. </title>
</head>
<body>
<button>Hide/Show</button>
<p>This is a paragraph of text. </p>
<p>This is another paragraph of text. </p>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(function() {
$("button").click(function(){
$("p").toggle(600);
});
});
</script>
</body>
</html>
Effect picture: