简单的隐藏和显示的功能 的实现
实例：
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>黄英文网页设计</title>
-
<script src="js/jquery-1.8.3.min.js"></script>
-
</head>
-
<body>
-
<p id="one">这里是将要显示或者是要隐藏的信息</p>
-
<button id="hide">隐藏</button>
-
<button id="show">显示</button>
-
<script>
-
$("#hide").click(function () {
-
$("#one").hide();
-
});
-
$("#show").click(function () {
-
$("#one").show();
-
});
-
</script>
-
</body>
-
</html>
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>黄英文网页设计</title>
-
<script src="js/jquery-1.8.3.min.js"></script>
-
</head>
-
<body>
-
<p id="one">这里是将要显示或者是要隐藏的信息</p>
-
<button id="hide">隐藏</button>
-
<button id="show">显示</button>
-
<button id="hide1000">隐藏1000ms</button>
-
<button id="show1000">显示1000ms</button>
-
<script>
-
$("#hide").click(function () {
-
$("#one").hide();
-
});
-
$("#show").click(function () {
-
$("#one").show();
-
});
-
$("#hide1000").click(function () {
-
$("#one").hide(1000);
-
});
-
$("#show1000").click(function () {
-
$("#one").show(1000);
-
});
-
</script>
-
</body>
-
</html>
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>黄英文网页设计</title>
-
<script src="js/jquery-1.8.3.min.js"></script>
-
</head>
-
<body>
-
<p id="one">这里是将要显示或者是要隐藏的信息</p>
-
<button id="hide">隐藏</button>
-
<button id="show">显示</button>
-
<button id="hide1000">隐藏1000ms</button>
-
<button id="show1000">显示1000ms</button>
-
<button id="showhide">显示或隐藏</button>
-
<script>
-
$("#hide").click(function () {
-
$("#one").hide();
-
});
-
$("#show").click(function () {
-
$("#one").show();
-
});
-
$("#hide1000").click(function () {
-
$("#one").hide(1000);
-
});
-
$("#show1000").click(function () {
-
$("#one").show(1000);
-
});
-
$("#showhide").click(function () {
-
$("#one").toggle(1000);
-
});
-
</script>
-
</body>
-
</html>
阅读(1049) | 评论(0) | 转发(0) |
