js实现仿爱微网两级导航菜单效果代码

本文实例讲述了js实现仿爱微网两级导航菜单效果代码。分享给大家供大家参考。具体如下：
这是一款仿爱微网两级导航菜单，tab选项卡形式的导航菜单，原生js做的tab选项卡型的导航菜单，需要鼠标点击才切换出二级子菜单，可修改成鼠标移过去就更换内容的形式。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/
具体代码如下：

<html><head><title>一个两级的网页菜单</title><style>*{margin:0;padding:0;}.subnav { background-color: #3188DA; color: #C0DEF9; height: 20px;}.subnav a { color: #FFFFFF; margin-bottom: 0; margin-left: 5px; margin-right: 5px; margin-top: 0;}.subnav a.cur { color: #FAEC04;}.aa { background-image: url（"images/ui1.png"）; background-origin: padding-box; background-position: left -92px; background-repeat: no-repeat;}.bb { background-color: #75BAFB; background-image: url（"images/ui1.png"）; background-position: left -183px; background-repeat: no-repeat;}.cc{color:#ffffff;}.dd{color:#000}ul,li{list-style-type:none}#navbox { margin-bottom: 15px; position: relative; width:960px;}.mainnav { border-bottom-color: #3188DA; border-bottom-style: solid; border-bottom-width: 5px; height: 31px;}.mainnav li { color: #FFFFFF; float: left; font-size: 14px; font-weight: bold; line-height: 31px; margin-right: 5px; text-align: center; width: 90px;}.mainnav li a { display: block; font-weight: normal; height: 31px;}.uhide{display:none;}.ushow{display:block;}</style></head><body><div id="navbox"><ul class="mainnav"> <li class="bb" onclick="qh（0）;" id="ta_0"><a href="#" class="cc" id="a0">首页</a></li> <li class="aa" onclick="qh（1）;" id="ta_1"><a href="#" class="dd" id="a1">PHP教程</a></li> <li class="aa" onclick="qh（2）;" id="ta_2"><a href="#" class="dd" id="a2">网页前端</a></li> <li class="aa" onclick="qh（3）;" id="ta_3"><a href="#" class="dd" id="a3">网页特效</a></li> <li class="aa" onclick="qh（4）;" id="ta_4"><a href="#" class="dd" id="a4">脚本下载</a></li></ul><div style="padding-left:20px;" class="uhide" id="tab_0"></div><div style="padding-left:20px;" class="subnav uhide" id="tab_1"><a >PHP基础</a> | <a href="#">mysql教程</a> | <a href="#">smarty教程</a> |<a href="#">PHP框架</a> | <a href="#">PHP开源</a> | <a href="#">Linux教程</a> </div><div style="padding-left:20px;" class="subnav uhide" id="tab_2"><a >DIV+CSS布局</a> | <a href="#">javascript教程</a> | <a href="#">jquery教程</a> |<a href="#">ajax教程</a> | <a href="#">flash开源</a> | <a href="#">photoshop教程</a> </div><div style="padding-left:20px;" class="subnav uhide" id="tab_3"><a >js导航菜单</a> | <a href="#">js表单特效</a> | <a >js幻灯片</a> |<a href="#">js文本特效</a> | <a href="#">js弹出层</a> | <a href="#">js网页特效</a> </div><div style="padding-left:20px;" class="uhide" id="tab_4"></div></div><script>function g（o）{return document.getElementById（o）;}function qh（n）{ for（var i=0;i<=6;i++）{g（"ta_"+i）.className="aa";g（"ta_"+n）.className="bb";g（"a"+i）.className="dd";g（"a"+n）.className="cc";g（"tab_"+i）.className="uhide subnav";g（"tab_"+n）.className="ushow subnav";g（"tab_0"）.className="uhide";g（"tab_0"）.className="uhide";g（"tab_4"）.className="uhide";g（"tab_4"）.className="uhide"; }}</script></body></html>

希望本文所述对大家的javascript程序设计有所帮助。