当前位置:首页 > 代码 > 正文

点击显示隐藏层代码(层的显示与隐藏)

admin 发布:2022-12-19 20:59 144


本篇文章给大家谈谈点击显示隐藏层代码,以及层的显示与隐藏对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

求html 点击显示隐藏层代码

层:

div id="invisible_layer" style="position:absolution;left:100;top:100;width:200;height:200;border:1px solid black; visibility="hidden"隐藏的层/div

点击的链接:

a href="javascript:showlayer();"显示隐藏的层/a

网页的head:

script type="text/javascript"

function showlayer()

{

document.GetElementById("invisible_layer").style.visibility="visible";

}

/script

JAVA对层的显示和隐藏代码

HTML

HEAD

SCRIPT LANGUAGE="JavaScript"

!--

var show_Interval = null;

var hide_Interval = null;

var long_Interval = null;

var short_Interval = null;

function $(id){

return document.getElementById(id);

}

function showDiv(id){

clearInterval(hide_Interval)

show_Interval=setInterval("showDivSlow(\""+id+"\")", 100);

}

function showDivSlow(id){

if($(id).style.display=="none"){

$(id).style.display="block";

}

var opacity=$(id).filters.alpha.opacity;

if(opacity==100){

clearInterval(show_Interval)

}else{

$(id).filters.alpha.opacity=opacity+5;

}

}

function longDiv(id){

clearInterval(short_Interval)

long_Interval=setInterval("longDivSlow(\""+id+"\")", 100);

}

function longDivSlow(id){

var height=$(id).style.height;

height=parseInt(height.substr(0,height.length-2));

if(height==500){

clearInterval(long_Interval)

}else{

$(id).style.height=(height+5)+'px';

}

}

function shortDiv(id){

clearInterval(long_Interval)

short_Interval=setInterval("shortDivSlow(\""+id+"\")", 100);

}

function shortDivSlow(id){

var height=$(id).style.height;

height=parseInt(height.substr(0,height.length-2));

if(height==0){

clearInterval(short_Interval)

}else{

$(id).style.height=(height-5)+'px';

}

}

function hideDiv(id){

clearInterval(show_Interval)

hide_Interval=setInterval("hideDivSlow(\""+id+"\")", 100);

}

function hideDivSlow(id){

var opacity=$(id).filters.alpha.opacity;

if(opacity==0){

$(id).style.display="none";

clearInterval(hide_Interval)

}else{

$(id).filters.alpha.opacity=opacity-5;

}

}

//--

/SCRIPT

/HEAD

BODY

button onclick="showDiv(1)"showDiv/button

button onclick="hideDiv(1)"hideDiv/button

button onclick="longDiv(1)"longDiv/button

button onclick="shortDiv(1)"shortDiv/button

div id="1" style="background-color:'red';width:400px;height:400px;filter:alpha(opacity=50);"div

/BODY

/HTML

补充:div必须支持滤镜,是IE才可以

补充2:不给分那我要哭了

JS点击按钮显示隐藏层问题

if(obj!=document.getElementById("divOne_1"))

{

document.getElementById("divOne_1").style.display="none";

}

最傻瓜的方式,在

click_a

函数内增加一个判断,如果obj不是divOne_1的话,则对obj则将divOne_1进行隐藏。

显示隐藏层的html代码怎么写啊,亲

style

#sddm

{ margin: 0 auto;

padding: 0;

z-index: 30;

background-color:#F4F4F4;

width: 480px;

height:23px;}

#sddm li

{ margin: 0;

padding: 0;

list-style: none;

float: left;

font: bold 12px arial}

#sddm li a

{ display: block;

margin: 0 1px 0 0;

padding: 4px 10px;

width: 60px;

background: #5970B2;

color: #FFF;

text-align: center;

text-decoration: none}

#sddm li a:hover

{ background: #49A3FF}

#sddm div

{ position: absolute;

visibility: hidden;

margin: 0;

padding: 0;

background: #EAEBD8;

border: 1px solid #5970B2}

#sddm div a

{ position: relative;

display: block;

margin: 0;

padding: 5px 10px;

width: auto;

white-space: nowrap;

text-align: left;

text-decoration: none;

background: #EAEBD8;

color: #2875DE;

font: 12px arial}

#sddm div a:hover

{ background: #49A3FF;

color: #FFF}

/style

!-- dd menu --

script type="text/javascript"

!--

var timeout         = 500;

var closetimer = 0;

var ddmenuitem      = 0;

// open hidden layer

function mopen(id)

{

// cancel close timer

mcancelclosetime();

// close old layer

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it

ddmenuitem = document.getElementById(id);

ddmenuitem.style.visibility = 'visible';

}

// close showed layer

function mclose()

{

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

}

// go close timer

function mclosetime()

{

closetimer = window.setTimeout(mclose, timeout);

}

// cancel close timer

function mcancelclosetime()

{

if(closetimer)

{

window.clearTimeout(closetimer);

closetimer = null;

}

}

// close layer when click-out

document.onclick = mclose; 

// --

/script

/head

body style="text-align:center"

ul id="sddm"

lia href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()"Home/a

div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"HTML DropDown/a

a href="#"DHTML DropDown menu/a

a href="#"JavaScript DropDown/a

a href="#"DropDown Menu/a

a href="#"CSS DropDown/a

/div

/li

lia href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()"Download/a

div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"ASP Dropdown/a

a href="#"Pulldown menu/a

a href="#"AJAX dropdown/a

a href="#"DIV dropdown/a

/div

/li

lia href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()"Order/a

div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"Visa Credit Card/a

a href="#"Paypal/a

/div

/li

lia href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()"Help/a

div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"Download Help File/a

a href="#"Read online/a

/div

/li

lia href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()"Contact/a

div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"E-mail/a

a href="#"Submit Request Form/a

a href="#" target="_blank"codefans.net/a

/div

/li

/ul

div style="clear:both"/div

下拉菜单,鼠标移上,显示层,,鼠标移开,隐藏层

如何用js实现点击radiobutton 显示隐藏层

script

function hideDiv()

{

//以下两个语句,用visibility即使隐藏也占渲染位置,用display相当于将这个div彻底抹掉

document.getElementById("div1").style.visibility = "hidden";

document.getElementById("div2").style.display = "none";

}

/script

input type="radio" onclick="hideDiv()" /点我

div id="div1" style="visibility:visible;"123/div

div id="div2" style="display:block;"456/div

上面是让初始显示的层隐藏掉,反过来做就是

script

function hideDiv()

{

document.getElementById("div1").style.visibility = "visible";

document.getElementById("div2").style.display = "block";

}

/script

input type="radio" onclick="hideDiv()" /点我

div id="div1" style="visibility:hidden"123/div

div id="div2" style="display:none"457/div

点击显示隐藏层代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于层的显示与隐藏、点击显示隐藏层代码的信息别忘了在本站进行查找喔。

版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;

本文地址:http://ahzz.com.cn/post/23902.html


取消回复欢迎 发表评论:

分享到

温馨提示

下载成功了么?或者链接失效了?

联系我们反馈

立即下载