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怎么做显现或躲藏
图片[1]-div隐藏(div隐藏与显示属性详解)-宏启网络科技丨崇尚专注-追求极致,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

}

);

© 版权声明
THE END
喜欢就支持一下吧
点赞34赞赏 分享
评论 抢沙发

请登录后发表评论