在做项目中用到界面元素显示或隐藏的功能。比如：点击编辑按钮，切换复选框的显示隐藏。根据数据库中某一字段的不同值，在界面上显示不同的按钮组合。因此查找了如何控制界面元素的显示或隐藏方法。
一、通过jquery封装好的方法：
1、jQuery hide() 和show()：
1. $("#hide").click(function(){ 2. $("p").hide(); 3. }); 4. 5. $("#show").click(function(){ 6. $("p").show(); 7. });
1. function ShowOrHidden() { 2. var state = document.getElementById("worksstate").value; 3. if (state == "送拍") { 4. $("#auctioned").show(); 5. $("#shooted").hide(); 6. $("#auction").hide(); 7. $("#shoot").hide(); 8. return false; 9. } 10. 11. }
<input type=hidden id="worksstate" runat=server />
1. <div id="auction" name="name" > 2. <asp:Button ID="btnAuction" runat="server" Text="送拍" οnclick="btnShoot_Click" /> 3. </div> 4. <div id="shoot" name="name" > 5. <input id="btn1" type="button" value="送展" /> 6. </div> 7. <div id="shooted" name="name" > 8. <input id="Button2" type="button" value="已送展" /> 9. </div> 10. <div id="auctioned" name="name" > 11. <input id="Button3" type="button" value="已送拍" /> 12. </div>
根据id为worksstate的input元素的value值，设置多个div显示隐藏。
2、jQuery toggle()：
1. $("button").click(function(){ 2. $("p").toggle(); 3. });
可以借助W3school的在线测试工具验证一下：
http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_show
二、通过设置元素的属性
3、设置id为one的元素的display属性为block：显示；设置id为three的元素的display属性为none：隐藏；
1. function ShowDelete() { 2. $("#one").css('display','block');//显示 3. $("#three").css('display','none'); //隐藏 4. }
4、获取界面上所有的input元素，如果input元素为复选框checkbox类型，就设置它们隐藏。
1. function HiddenCheckBox() { 2. var inputs = document.getElementsByTagName("input"); //获取所有的input标签对象 3. var checkboxArray = []; //初始化空数组，用来存放checkbox对象。 4. for (var i = 0; i < inputs.length; i++) { 5. var obj = inputs[i]; 6. if (obj.type == 'checkbox') { 7. obj.style.display = "none"; 8. } 9. } 10. 11. }
5、设置元素的visibility属性。
1. $(selector).css("visibility","hidden");//隐藏 2. $(selector).css("visibility","visible");//显示
此种方式的隐藏虽然不显示了，但是元素依然占着位置。这是与上两种方式的不同之处。
小小的元素显示隐藏，也有多种不同的方法实现，要根据自己的需求，找一个简便合适的方法。
最后放一个小彩蛋：
http://www.programgo.com/article/42365453569/;jsessionid=E472E10B45835C96C213F14CA5A28742
-----------------------------------------haha-----------------------------------
这篇文章给了我很大帮助，查了多个资料，这个最全，居然自己整理下来，几乎全一样。
