利用javascript编写一个简单的网站导航菜单
发布网友
发布时间：2022-04-22 12:39
共2个回答
热心网友
时间：2022-04-23 10:13
恩 没这方面的知识哦
热心网友
时间：2022-04-23 11:47
<html>
<head>
</head>
<script language="javascript">
function show(id)
{
var dd=document.getElementById(id);
dd.style.backgroundColor='#996633';
if(id=="1")
{
showid=document.getElementById("11");
showid.style.visibility="visible"
}
if(id=="2")
{
showid=document.getElementById("12");
showid.style.visibility="visible"
}
if(id=="3")
{
showid=document.getElementById("13");
showid.style.visibility="visible"
}
}
function hidden(id)
{
var dd=document.getElementById(id);
dd.style.backgroundColor='#ffffff';
if(id=="1")
{
showid=document.getElementById("11");
showid.style.visibility="hidden"
}
if(id=="2")
{
showid=document.getElementById("12");
showid.style.visibility="hidden"
}
if(id=="3")
{
showid=document.getElementById("13");
showid.style.visibility="hidden"
}
}
</script>
<body>
<div id='1' style="float:left;width:80;" align="center" onMouseOver="show('1')" onMouseOut="hidden('1')">首页 </div><div id="2" style="float:left;width:80" onMouseOver="show('2')" align="center" onMouseOut="hidden('2')">公司简介 </div><div id='3' style="width:80" onMouseOver="show('3')" align="center" onMouseOut="hidden('3')">客户</div>
<div id='11' onMouseOver="show('1')" onMouseOut="hidden('1')" style="position:absolute;background-color:#999999; width:80;visibility:hidden;float:left " >
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
<div id='12' onMouseOver="show('2')" onMouseOut="hidden('2')" style="left:90;position:absolute;background-color:#999999;width:80;visibility:hidden;float:left">
<ul>
<li>ddd</li>
<li>eeee</li>
<li>fff</li>
</ul>
</div>
<div id='13' onMouseOver="show('3')" onMouseOut="hidden('3')" style="left:173;position:absolute;background-color:#999999;width:80;visibility:hidden;">
<ul>
<li>iii</li>
<li>fff</li>
<li>kkk</li>
</ul>
</div>
<hr>
</body>
</html>
