html控制元素手机上面隐藏,JQuery 控制html元素显示或隐藏

在做项目中用到界面元素显示或隐藏的功能。比如：点击编辑按钮，切换复选框的显示隐藏。根据数据库中某一字段的不同值，在界面上显示不同的按钮组合。因此查找了如何控制界面元素的显示或隐藏方法。

一、通过jquery封装好的方法：

1、jQuery hide() 和show()：

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

function ShowOrHidden() {

var state = document.getElementById("worksstate").value;

if (state == "送拍") {

$("#auctioned").show();

$("#shooted").hide();

$("#auction").hide();

$("#shoot").hide();

return false;

}

}

根据id为worksstate的input元素的value值，设置多个div显示隐藏。

2、jQuery toggle()：

$("button").click(function(){

$("p").toggle();

});

可以借助W3school的在线测试工具验证一下：

http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_show

二、通过设置元素的属性

3、设置id为one的元素的display属性为block：显示；设置id为three的元素的display属性为none：隐藏；

function ShowDelete() {

$("#one").css('display','block');//显示

$("#three").css('display','none'); //隐藏

}

4、获取界面上所有的input元素，如果input元素为复选框checkbox类型，就设置它们隐藏。

function HiddenCheckBox() {

var inputs = document.getElementsByTagName("input"); //获取所有的input标签对象

var checkboxArray = []; //初始化空数组，用来存放checkbox对象。

for (var i = 0; i < inputs.length; i++) {

var obj = inputs[i];

if (obj.type == 'checkbox') {

obj.style.display = "none";

}

}

}

5、设置元素的visibility属性。

$(selector).css("visibility","hidden");//隐藏

$(selector).css("visibility","visible");//显示

此种方式的隐藏虽然不显示了，但是元素依然占着位置。这是与上两种方式的不同之处。

小小的元素显示隐藏，也有多种不同的方法实现，要根据自己的需求，找一个简便合适的方法。

最后放一个小彩蛋：

http://www.programgo.com/article/42365453569/;jsessionid=E472E10B45835C96C213F14CA5A28742

-----------------------------------------haha-----------------------------------

这篇文章给了我很大帮助，查了多个资料，这个最全，居然自己整理下来，几乎全一样。