利用Javascript实现下拉菜单导航

来源：互联网发布：赵薇,还珠格格知乎编辑：程序博客网时间：2024/06/16 11:57

<body><div id="outside"><ul>    <li><a href="#" onmouseover="show(1);">视频教程         <table><tr><td  onmouseover="show(1);" onmouseout="hidden();">        <div class="inside" id="first">        <span><a href="#" target="_blank" class="class_menu">平面设计</a></span>        <span><a href="#" target="_blank">编程开发</a></span>        <span><a href="#" target="_blank">三维动画</a></span>        <span><a href="#" target="_blank">网页制作</a></span>        <span><a href="#" target="_blank">Flash动画</a></span>        </div>        </td></tr></table></a>   </li>

下面是脚本：

function show(position){if (position==1){    document.getElementById('first').style.display='block';document.getElementById('second').style.display='none';    document.getElementById('third').style.display='none';}else if (position==2){    document.getElementById('first').style.display='none';document.getElementById('second').style.display='block';    document.getElementById('third').style.display='none';}else{    document.getElementById('first').style.display='none';document.getElementById('second').style.display='none';    document.getElementById('third').style.display='block';}}function hidden(){    document.getElementById('first').style.display='none';document.getElementById('second').style.display='none';    document.getElementById('third').style.display='none';}