div隐藏(div隐藏与显示属性详解)

js控制div显现与躲藏,js利用”hover”特点

1.首要样式要设定好，在每个li区域只能显现a或许b。2.引进js库代码(jquery库需求引证，1.4版本以上都可以)3.设定外部ul的id特点：假设为ullist4.编写js代码下面是我写的一个例子代码，供你参阅，jquery库需求自己下载并引证A面内容B面内

使用jquery怎样给div加个躲藏特点呢？

jquery如何躲藏多个不同特点的div层

>新闻

css中display怎么做显现或躲藏
,div隐藏与显示属性详解,AAA

JS躲藏和显现div的办法有两种：

办法1：躲藏后开释占用的页面空间

通过设置display特点能够使div躲藏后开释占用的页面空间.

style=”display:none;”

document.getElementById(“demo”).style.display=”none”;//躲藏

document.getElementById(“demo”).style.display=””;//显现

办法2：躲藏后仍占有页面空间，显现空白

div的visibility能够控制div的显现和躲藏，但是躲藏后页面显现空白.

style=”visibility:none;”

document.getElementById(“demo”).style.visibility=”hidden”;//躲藏

document.getElementById(“demo”).style.visibility=”visible”;//显现

注意：

运用第二办法更人性化，但是，用div.style.display=”none”躲藏会引起，div里边的东西休眠，里边的事情就不响应了。

jQuery躲藏和显现div的办法

1、$(“#demo”).attr(“style”,”display:none;”);//躲藏div

$(“#demo”).attr(“style”,”display:block;”);//显现div

2、$(“#demo”).css(“display”,”none”);//躲藏div

$(“#demo”).css(“display”,”block”);//显现div

3、$(“#demo”).hide();//躲藏div

$(“#demo”).show();//显现div

4、$(“#demo”).toggle(//动态显现和躲藏

function(){

$(this).attr(“style”,”display:none;”);//躲藏div

},

function(){

$(this).attr(“style”,”display:block;”);//显现div

}

);

注：

$(“#demo”).show()表明display:block,

$(“#demo”).hide()表明display:none;

1和2中的display:none能够换成visibility:hidden，display:block能够换成visibility:visible.两者的区别是前者躲藏后不占空间，而后者躲藏后会占空间

下面是脚本之家小编弥补几个例子

$(“#top_notice”).css(“display”,”block”);//第1种办法

//$(“#top_notice”).attr(“style”,”display:block;”);//第2种办法

//$(“#top_notice”).show();//第3种办法

1.给元素换class，来实现躲藏div，条件是换的class样式定义好了躲藏特点

如下:

$(“#sendPhoneNum”).attr(“class”,”n_input3″);

1.2给元素设置style特点

如下:

$(“#top_notice”).attr(“style”,”display:block;”);

2.通过jquery的css办法，设置div躲藏

代码如下:

$(“#sendPhoneNum”).css(“display”,”none”);

3.通过jquery的show()、hide()办法，设置div躲藏

代码如下:

$(“#textDiv”).show();//显现div

$(“#imgDiv”).hide();//躲藏div

在程序设计中经常用到div的显现和躲藏，下面总结几种办法：

代码如下:

示例

1、$(“#demo”).attr(“style”,”display:none;”);//躲藏div

$(“#demo”).attr(“style”,”display:block;”);//显现div

2、$(“#demo”).css(“display”,”none”);//躲藏div

$(“#demo”).css(“display”,”block”);//显现div

3、$(“#demo”).hide();//躲藏div

$(“#demo”).show();//显现div

4、$(“#demo”).toggle(

function(){

$(this).attr(“style”,”display:none;”);//躲藏div

},

function(){

$(this).attr(“style”,”display:block;”);//显现div

}

);