利用Javascript实现下拉菜单导航

最新推荐文章于 2022-04-17 22:35:29 发布

kilimanjar0

最新推荐文章于 2022-04-17 22:35:29 发布

阅读量556

点赞数

分类专栏： Javascript 文章标签： javascript class function menu 脚本编程

本文链接：https://blog.csdn.net/kilimanjar0/article/details/6859547

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<body>

<div id="outside">
<ul>
    <li><a href="#" οnmοuseοver="show(1);">视频教程
         <table><tr><td  οnmοuseοver="show(1);" οnmοuseοut="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';
}