主要用到
$("#id").show();//顯示
$("#id").hide();//隱藏
$("#id").toggle();//狀態相反
========================示例代碼=============================
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery Start</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>//記得引用
<script type="text/javascript">
$(function () {
var speed = 5000;//動畫設置時間,毫秒
$("#btnShow").click(function (event) { //給btnShow按鈕綁定點擊事件
event.stopPropagation(); //取消事件的冒泡
//設置層的屬性
var offSet = $(event.target).offset();
$("#divPop").css({ top: offSet.top + $(event.target).height() + "px", left: offSet.left, width: "300px", height: "200px" });
$("#divPop").show(speed); //divPop動態顯示
});
$("#divPop").click(function (event) { $(this).hide(speed);//動態隱藏 })
$("#Button1").click(function (event) {
event.stopPropagation();
var offset1 = $(event.target).offset();
$("#div1").css({ top: offset1.top + $(event.target).height() + "px", left: offset1.left, width: "300px", height: "200px" });
$("#div1").toggle(speed);//動態切換,如果div1顯示着,則單擊按鈕Button1控件div1隱藏(hide()),否則相反show()顯示
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style=" border: solid 1px red; margin-bottom: 0px;"><br />
</div>
<div id="divPop" style="background-color:#f0f0f0; border:solid 1px red; display:none; ">
<div>這是顯示層</div>
</div>
<div>
<br />
<input id="btnShow" type="button" value="提示文字" />
</div>
<div><input id="Button1" type="button" value="切換Div層" /></div>
<div id="div1" style="border:solid 1px blue; display:none; position:absolute; display:none;"></div>
</form>
</body>
</html>
============有錯誤的地方,請多多指教==================
--------------------ethan 待續-----------------------