20151116

 单击隐藏按钮将隐藏所有的<p></p>之间的所有内容,单击显示按钮后将会再次出现,刚才隐藏的所有<p></p>中的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="application/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="application/javascript">

//$(document).ready(function() {$("p").hide()});
$(document).ready(function() {
$("#hide").click(function(){$("p").hide();});

$("#show").click(function(){$("p").show();});
});
</script>

</head>

<body>
<p>显示的内容</p>
<input id="hide" type="button" value="隐藏" />
<input id="show" type="button" value="显示" />
</body>
</html>

 隐藏按钮将class=a的所有行数用3s进行淡出隐藏,在此点击后3s内再淡入出现。

显示按钮进行自我隐藏!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="application/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="application/javascript">

//$(document).ready(function() {$("p").hide()});
$(document).ready(function() {
//$("#hide").click(function(){$("p").hide();});
//$("#show").click(function(){$("p").show();});
});
</script>

</head>

<body>
<p>显示的内容</p>
<p class="a">显示的内容2</p>
<div>div 显示</div>
<input id="hide" type="button" value="隐藏" 
onclick="$(this).click($('.a').fadeToggle(3000))" />
<input id="show" type="button" value="显示" 
onclick="$(this).click($(this).hide())" />
</body>
</html>
原文地址:https://www.cnblogs.com/name-hanlin/p/4970374.html