javascript 显示隐藏层的问题？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 显示隐藏层的问题？相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

-->
</style>
<script language="javascript" type="text/JavaScript">
<!--
function MM_reloadPage(init) //reloads the window if Nav4 resized
if (init==true) with (navigator) if ((appName=="Netscape")&&(parseInt(appVersion)==4))
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage;
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

MM_reloadPage(true);

function MM_findObj(n, d) //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;


function MM_showHideLayers() //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) v=args[i+2];
if (obj.style) obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
obj.visibility=v;

//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:10px; top:10px; width:650px; height:26px; z-index:1; visibility: visible;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#990000">
<td height="32" bgcolor="#FFCC00" onMouseOver="MM_showHideLayers('Layer2','','show')"><a href="#">这里的有问题</a></td>
<td>fdsafdsafds</td>
<td>fdsafdsafdsa</td>
<td>fdsafdsafdsafdsafdsafds</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:12px; top:42px; width:134px; height:28px; z-index:2; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer2','','hide')">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td height="22"><a href="#">dsadsad</a><br>
<br>
<a href="#">sadsada</a> </tr>
</table>
</div>
<div id="Layer3" style="position:absolute; left:266px; top:42px; width:137px; height:71px; z-index:3; visibility: visible;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" bgcolor="#009966">dsadsa</td>
</tr>
<tr>
<td height="30" bgcolor="#009966">dsadsada</td>
</tr>
</table>
</div>
</body>
</html>

简单 就在你显示出来的层里加上
onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')"

全部代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--

function MM_findObj(n, d) //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;


function MM_showHideLayers() //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) v=args[i+2];
if (obj.style) obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
obj.visibility=v;

//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:10px; top:10px; width:650px; height:26px; z-index:1; visibility: visible;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#990000">
<td height="32" bgcolor="#FFCC00" onMouseOver="MM_showHideLayers('Layer2','','show')"><a href="#">这里的有问题</a></td>
<td>fdsafdsafds</td>
<td>fdsafdsafdsa</td>
<td>fdsafdsafdsafdsafdsafds</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:12px; top:42px; width:134px; height:28px; z-index:2; visibility: hidden;" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td height="22"><a href="#">dsadsad</a><br>
<br>
<a href="#">sadsada</a> </tr>
</table>
</div>
<div id="Layer3" style="position:absolute; left:266px; top:42px; width:137px; height:71px; z-index:3; visibility: visible;" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" bgcolor="#009966">dsadsa</td>
</tr>
<tr>
<td height="30" bgcolor="#009966">dsadsada</td>
</tr>
</table>
</div>
</body>
</html> 参考技术A 你说的问题是不是：弹出菜单以后，鼠标移动到子菜单的第二行，子菜单就全部消失了，根本选不了子菜单的第二选项。那就这样改试试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) //reloads the window if Nav4 resized
if (init==true) with (navigator) if ((appName=="Netscape")&&(parseInt(appVersion)==4))
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage;
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

MM_reloadPage(true);

function MM_findObj(n, d) //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;


function MM_showHideLayers() //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) v=args[i+2];
if (obj.style) obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
obj.visibility=v;

//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:10px; top:10px; width:650px; height:26px; z-index:1; visibility: visible;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#990000">
<td height="32" bgcolor="#FFCC00" onMouseOver="MM_showHideLayers('Layer2','','show')"><a href="#">这里的有问题</a></td>
<td>fdsafdsafds</td>
<td>fdsafdsafdsa</td>
<td>fdsafdsafdsafdsafdsafds</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:12px; top:42px; width:134px; height:28px; z-index:2; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer2','','hide')" onMouseOver="MM_showHideLayers('Layer2','','show')">
<!--

在Layer2图层再加上代码（即上一行）：
onMouseOver="MM_showHideLayers('Layer2','','show')"

-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td height="22"><a href="#">dsadsad</a><br>
<br>
<a href="#">sadsada</a> </tr>
</table>
</div>
<div id="Layer3" style="position:absolute; left:266px; top:42px; width:137px; height:71px; z-index:3; visibility: visible;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" bgcolor="#009966">dsadsa</td>
</tr>
<tr>
<td height="30" bgcolor="#009966">dsadsada</td>
</tr>
</table>
</div>
</body>
</html> 参考技术B 哪里不对，你要什么效果？

控制div层的显示以及隐藏

控制div层的显示以及隐藏，例如，点击登录，弹出登录的层。

1、添加script代码

<script>
        function add_address(){
            $(‘#popup2‘).show();
            $(‘#gray‘).show();
        }
        function closeAddressDiv(){
            $(‘#popup2‘).hide();
        }
    </script>

2、在body标签里面添加如下的div

<div class="popup2" id="popup2">
    <div class="top_nav" id=‘top_nav2‘>
        <div align="center">
            <span>新增收货地址</span>
            <a class="guanbi" href="javascript:void(0);" onclick="closeAddressDiv()"></a>
        </div>
    </div>

    <table cellpadding="0" cellspacing="0" class="my_address2">
        <tr>
            <th><span class="red">*</span>所在地区：</th>
            <td><input type="text" class="text_input" placeholder="请选择省市区">
            </td>
        </tr>
        <tr>
            <th><span class="red">*</span>详细地址：</th>
            <td><input type="text" class="text_input long" placeholder="建议您如实填写详细地址，例如街道名称、门牌号码、楼层和房间号等信息">  </td>
        </tr>
        <tr>
            <th><span class="red">*</span>邮政编码：</th>
            <td><input type="text" class="text_input" placeholder="如您不清楚邮递编号，请填写000000">    </td>
        </tr>
        <tr>
            <th><span class="red">*</span>收货人姓名：</th>
            <td><input type="text" class="text_input" placeholder="长度不超过25个字符">     </td>
        </tr>
        <tr>
            <th><span class="red">*</span>手机号码：</th>
            <td>
                <select name="select" id="select" class="select_form">
                    <option >中国大陆 +86</option>
                </select>
                <input type="text" class="text_input" placeholder="手机号码、电话号码必须填一项">
       　　 </td>
        </tr>
        <tr>
            <th>电话号码：</th>
            <td>
                <select name="select" id="select" class="select_form">
                    <option >中国大陆 +86</option>
                </select>
                <input type="text" class="text_input small1" placeholder="区号"> -
                <input type="text" class="text_input small2" placeholder="电话号码"> -
                <input type="text" class="text_input small3" placeholder="分机号">
            </td>
        </tr>
        <tr>
            <th></th>
            <td><input type="checkbox" checked> 设为默认收货地址</td>
        </tr>
        <tr>
            <th></th>
            <td><input type="submit" class="but_input" value="保 存"></td>
        </tr>
    </table>
</div>

 

以上是关于javascript 显示隐藏层的问题？的主要内容，如果未能解决你的问题，请参考以下文章

javascript 层的显示和隐藏

select控制层的隐藏和显示

怎么用JS隐藏一个DIV层?

DIV层显示隐藏

jquery如何控制循环里面的层的显示与隐藏

下拉列表框控制层的显示和隐藏