您的位置：首页 > Web前端 > JavaScript

javascript --- 一个菜单效果代码

2007-01-20 13:06 501 查看
<script language="javascript">
var isOpen = false; //是否有层开着
var oldid = 0 //表示调用seeMsg的前一个id,0代表第一次运行

function seeMsg(id) {

if (oldid == 0 ) oldid = id
if (isOpen) {
if (oldid != id) {
document.getElementById(oldid).style.display = "none";
document.getElementById(id).style.display = "block";
oldid = id;
}
else {
document.getElementById(id).style.display = "none";
isOpen = false;
}

}
else {
document.getElementById(id).style.display = 'block';
isOpen = true;
}
}

</script>
<body>
<a href="#" onClick="seeMsg('abc');">点击查看1</a><br /><br /><br />
<div id="abc" style="display:none">
<table width="100%" border="0" >
<tr>
<td bgcolor="#CCCCCC">显示详细内容1<a href="#" onClick="seeMsg('abc');">关闭</a></td>
</tr>
</table>
</div>
<a href="#" onClick="seeMsg('a');">点击查看2</a>
<div id="a" style="display:none">
<table width="100%" border="0" >
<tr>
<td bgcolor="#33CC99">显示详细内容2<a href="#" onClick="seeMsg('a');">关闭</a></td>
</tr>
</table>
</div>

//---------------------------------------
var isOpen = false; //是否有层开着
var oldid = 0 //表示调用seeMsg的前一个id,0代表第一次运行
function seeMsg(id) {
if (oldid == 0 ) oldid = id
if (isOpen) {
if (oldid != id) {
document.getElementById(oldid).style.display = "none";
document.getElementById(id).style.display = "block";
alert("关闭1");
oldid = id;
}
else {
document.getElementById(id).style.display = "none";
isOpen = false;
alert("关闭2");
}

}
else {
document.getElementById(id).style.display = 'block';
isOpen = true;
}
}

点击查看1

显示详细内容1关闭
点击查看2

显示详细内容2关闭
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航