發佈日期：
分類：
如何使用jQuery‧將物件作隱藏及顯示
近來開始研究jQuery，一切當然是從最基本學起。
01. 例子一：建立2個按鍵(Button)，其id分別為hidr及showr。再在div標籤中，用span標籤定義圖片及文字。執行script，按下hidr鍵時，便可把圖片及文字隱藏，按下showr鍵時，圖片及文字便重新顯示出來。(測試效果)
<!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>
<style>
span, p {
background:#def3ca;
padding:5px;
float:left;
}
button {
font-family: "Arial";
font-size: 11pt;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
</head>
<body>
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<div>
<span><img src="jquery_image.jpg" width="320" height="240" align="absmiddle" border="0"></span>
<span>Heart of Hearts Collection</span>
</div>
<script>
$("#hidr").click(function (){
$("span:last-child").hide("fast", function () {
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("span").show(2000);
});
</script>
</body>
</html>
02. 例子二：與之前例子一樣，但今次不用span標籤，改用p標籤，做法是一樣的，只需要更改span標籤，為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>
<style>
span, p {
background:#def3ca;
padding:5px;
float:left;
}
button {
font-family: "Arial";
font-size: 11pt;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
</head>
<body>
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<div>
<p><img src="jquery_image.jpg" width="320" height="240" align="absmiddle" border="0"></p>
<p>Heart of Hearts Collection</p>
</div>
<script>
$("#hidr").click(function (){
$("p:last-child").hide("fast", function () {
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("p").show(2000);
});
</script>
</body>
</html>
02. 例子三：改為使用div標籤，按下圖片，便隱藏該圖片。(測試效果)
<!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>
<style>
div {
float: left;
width: 320px;
height: 240px;
margin: 5px;
border: 1px solid;
}
div.red {
border-color: red;
}
div.yellow {
border-color: yellow;
}
div.green {
border-color: green;
}
button {
font-family: "Arial";
font-size: 11pt;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
</head>
<body>
<div class="red"><img src="jquery_image.jpg"></div>
<div class="yellow"><img src="jquery_image.jpg"></div>
<div class="green"><img src="jquery_image.jpg"></div>
<script>
$("div").click(function () {
$(this).hide(1000, function () {
$(this).remove();
});
});
</script>
</body>
</html>
註：jQuery版本為1.6.1。
發佈留言