JQuery中隐藏和显示元素分别使用hide和show方法，或者使用toggle方法。
但是在隐藏和显示过程中我们要对一个按钮的文本进行修改
方法一：
使用toggle方法自动切换隐藏显示状态
View Code
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>显示隐藏</title> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#Button2").click(function () { var ss = $("#test1"); var btn = $("#Button2"); //ss.show() ss.toggle(); //alert(ss.css("display")); if (ss.css("display") == "none") { btn.val("显示"); } else if (ss.css("display") == "block") { btn.val("隐藏"); } }) } ); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="test1" style="height:100px;"> Hello!</div> <input id="Button2" type="button" value="隐藏" /> </div> </form> </body> </html>
方法二：
使用hide和show方法，并使用CallBack事件。
View Code
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>显示隐藏</title> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> function toggle() { var ss = $("#test1"); //如果元素为隐藏状态就显示，反之则隐藏，同时修改按钮文本 if (ss.css("display") == "none") { ss.show("slow", ChangebtnText("隐藏")); } else if (ss.css("display") == "block") { ss.hide("fast", ChangebtnText("显示")); } } function ChangebtnText(str) { var btn = $("#Button2"); btn.val(str); } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="test1" style="height:100px;"> Hello!</div> <input id="Button2" onclick="toggle()" type="button" value="隐藏" /> </div> </form> </body> </html>