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> 效果图：
<!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> 效果图：
相关推荐
opspider 0喜欢 / 0评论 2020-06-28
ZHANGRENXIANG00 0喜欢 / 0评论 2020-06-28
明瞳 0喜欢 / 0评论 2020-06-10
lanzhusiyu 0喜欢 / 0评论 2020-06-09
HSdiana 0喜欢 / 0评论 2020-06-03
PengQ 0喜欢 / 0评论 2020-05-26
lengyu0 0喜欢 / 0评论 2020-05-20
HSdiana 0喜欢 / 0评论 2020-05-11
haidaoxianzi 0喜欢 / 0评论 2020-04-18
PioneerFan 0喜欢 / 0评论 2020-04-09
HSdiana 0喜欢 / 0评论 2020-03-28
百年da孤独 0喜欢 / 0评论 2020-03-27
lwb 0喜欢 / 0评论 2020-03-26
haocxy 0喜欢 / 0评论 2020-03-08
spinachcqb 0喜欢 / 0评论 2020-03-06
柳永法的个人 0喜欢 / 0评论 2020-02-13
qsdnet我想学编程 0喜欢 / 0评论 2020-01-29
wwwxuewen 0喜欢 / 0评论 2020-01-19
爱好HtmlCssJs 0喜欢 / 0评论 2019-12-26
行吟阁 0喜欢 / 0评论 2019-12-14
yanweiqi 0喜欢 / 0评论 2019-12-12
zuihaobushi 0喜欢 / 0评论 2019-12-04
左转有出口 0喜欢 / 0评论 2019-12-02
somboy 0喜欢 / 0评论 2019-12-01
WebVincent 0喜欢 / 0评论 2019-11-19
DAV数据库 0喜欢 / 0评论 2019-11-11
yzxlemon 0喜欢 / 0评论 2014-06-25
csdnuuu 0喜欢 / 0评论 2019-11-05
书虫媛 0喜欢 / 0评论 2019-10-29
shawroad 0喜欢 / 0评论 2019-10-27
爱好HtmlCssJs 0喜欢 / 0评论 2019-10-25
爱好HtmlCssJs 0喜欢 / 0评论 2019-10-22
revivre 0喜欢 / 0评论 2015-01-24
whosemario 0喜欢 / 0评论 2015-02-12
scdn 0喜欢 / 0评论 2015-06-12
jadechen00 0喜欢 / 0评论 2015-05-18
galilajiao00 0喜欢 / 0评论 2015-06-03
bossbusy 0喜欢 / 0评论 2015-05-29
wangnan0 0喜欢 / 0评论 2015-07-17
中等偏下 0喜欢 / 0评论 2015-07-17
UC浏览器搜索引擎 0喜欢 / 0评论 2015-08-27
gufudhn 0喜欢 / 0评论 2015-10-28
starleejay 0喜欢 / 0评论 2015-10-26
MrWhite0 0喜欢 / 0评论 2016-05-03
yongyonglsy 0喜欢 / 0评论 2017-02-23