大家帮小弟我看看，这个导航菜单切换的该怎么修改

大家帮我看看，这个导航菜单切换的该如何修改
HTML部分：

HTML code

&lt;div class="tab1_mulu"&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 0)" id="nav1_0"&gt;&lt;a href="/"&gt;网赢首页&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 1)" id="nav1_1"&gt;&lt;a href="/Basic_services/"&gt;基础服务&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 2)" id="nav1_2"&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/"&gt;网站建设&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 3)" id="nav1_3"&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/"&gt;网站推广&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 4)" id="nav1_4"&gt;&lt;a href="/SEO/"&gt;SEO优化&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 5)" id="nav1_5"&gt;&lt;a href="#"&gt;综合方案&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 6)" id="nav1_6"&gt;&lt;a href="/wang-ying-shi-ji/"&gt;网赢快报&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 7)" id="nav1_7"&gt;&lt;a href="/jiameng/"&gt;加盟合作&lt;/a&gt;&lt;/div&gt;            &lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;div class="small_mulu"&gt;     &lt;div id="showTab1_0"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt; 欢迎来到网赢世纪，请选择你要的服务，徐州网站建设，徐州网站推广首选网赢世纪！ &lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;     &lt;div id="showTab1_1" style="display:none;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;&lt;a href="/domain/"&gt;域名注册&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Web_Hosting/"&gt;虚拟主机&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/E-mail/"&gt;企业邮箱&lt;/a&gt;&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;      &lt;div id="showTab1_2" style="display:none;"&gt;         &lt;ul class="showlist list3"&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/dao-hang-xing.asp"&gt;企业导航型网站建设方案&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/A-fang-an.asp"&gt;A级-企业形象型网站建设方案&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/AA-fang-an.asp"&gt;AA级-企业门户型网站建设方案&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/AAA-fang-an.asp"&gt;AAA级-标准商务型网站建设方案&lt;/a&gt;&lt;/li&gt;        &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_3" style="display:none;margin-left:100px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/sogou.asp"&gt;搜狐推广&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/baidu.asp"&gt;百度推广&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/google.asp"&gt;谷歌竞价排名&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/huicong.asp"&gt;慧聪网推广&lt;/a&gt;&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_4" style="display:none;margin-left:120px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;提升搜索引擎自然排名,服务于国内中小型有搜索引擎优化(seo)需求的企业&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_5" style="display:none;margin-left:300px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;暂时没有综合方案的活动，敬请期待！&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_6" style="display:none;margin-left:350px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=4"&gt;公司新闻&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=5"&gt;行业新闻&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=6"&gt;本地新闻&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=7"&gt;技术文章&lt;/a&gt;&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_7" style="display:none;margin-left:350px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;网赢世纪欢迎您的加盟！徐州优秀互联网服务提供商，网站建设专家&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt; &lt;/div&gt;

JS部分：

JScript code

function showTab(total, channelid, id){for (var i = 0; i &lt; total; i++){var nav = document.getElementById('nav'+channelid+'_'+i);var showTab = document.getElementById('showTab'+channelid+'_'+i);if (i == id){nav.className = 'tab_on';showTab.style.display = "";}else{nav.className = 'tab_off';showTab.style.display = "none";}document.write("nav.className ");}}

这个是一个JS控制着这个导航菜单，现在我不知道在HTML中如何获取改变后的CSS

[解决办法]

探讨
需要实现的就是在当前页面时就把这个class="tab_off"改为class="tab_on"

[解决办法]
写的太多了，看看别人是怎么写的吧，漂亮多了。

HTML code

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;meta name="keywords" content="源码下载,网页模板,字体下载,网页制作教程,源码交易,网站交易,网站开发,网页特效,酷站,站长论坛,web development,阿里西西" /&gt;&lt;meta name="description" content="阿里西西(alixixi.com)服务于广大Web开发爱好者的免费技术资源网站，提供最专业的网页制作教程，网站源码和模板下载，网页特效、站长资讯等建站资源；同时提供网站开发及技术支持服务。" /&gt;&lt;title&gt;鼠标经过导航弹出图层特效 阿里西西首发&lt;/title&gt;&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;&lt;style type="text/css"&gt;html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {     margin: 0;    padding: 0;    border: 0;    outline: 0;    vertical-align: baseline;    font-family: "Verdana","lucida sans",Sans-serif;    font-size: 12px; }html, body {     min-height: 100%;    color: #FFFFFF;    background-image: url(../images/body_back.jpg);    background-repeat: repeat-x;    background-position: top;    background-color: #161f2a;}ul.side_nav {width: 200px;float: left;margin: 0;padding: 0;}ul.side_nav li {position: relative; /*--Add a relative positioning--*/float: left;margin: 0;padding: 0;display: inline;}ul.side_nav li a {width: 165px;border-top: 1px solid #3373a9;border-bottom: 1px solid #003867;padding: 10px 10px 10px 25px;display: block;color: #fff;text-decoration: none;background: #005094 url(image/sidenav_arrow.gif) no-repeat 5px 10px;position: relative;z-index: 2;}ul.side_nav li a:hover {background-color: #2d353f;}ul.side_nav li div {display: none;position: absolute;top: 2px;left: 0;width: 225px;background:#eee;}ul.side_nav li div p {margin: 7px 0;line-height: 1.3em;padding: 0 5px 10px 30px;color: #444;background: url(image/bubble_btm.gif) no-repeat right bottom;}.content_txt {width: 480px;border-left: 1px dashed #2d353f;color: #EEE;float: left;margin-left: 20px;padding: 0 0 0 20px;display: inline;}.content_txt h4 {font-size: 140%;padding-bottom: 10px;}.content_txt p {font-size: 100%;padding: 0 0 5px 0;line-height: 130%;}&lt;/style&gt;&lt;script type="text/javascript"&gt;$(document).ready(function(){    $("ul.side_nav li").hover(function() {        $(this).find("div").stop()        .animate({left: "210", opacity:1}, "fast")        .css("display","block")    }, function() {        $(this).find("div").stop()        .animate({left: "0", opacity: 0}, "fast")    });});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;ul class="side_nav"&gt;    &lt;li&gt;    &lt;a href="http://www.alixixi.com"&gt;阿里西西首页&lt;/a&gt;    &lt;div&gt;&lt;p&gt;返回阿里西西首页&lt;/p&gt;&lt;/div&gt;    &lt;/li&gt;    &lt;li&gt;    &lt;a href="http://www.alixixi.com"&gt;关于阿里西西&lt;/a&gt;    &lt;div&gt;&lt;p&gt;阿里西西(alixixi.com)服务于广大Web开发爱好者的免费技术资源网站，提供最专业的网页制作教程，网站源码和模板下载，网页特效、站长资讯等建站资源；同时提供网站开发及技术支持服务。&lt;/p&gt;&lt;/div&gt;    &lt;/li&gt;    &lt;li&gt;    &lt;a href="http://www.alixixi.com"&gt;阿里西西三号导航&lt;/a&gt;    &lt;div&gt;&lt;p&gt;阿里西西web开发之家！&lt;/p&gt;&lt;/div&gt;    &lt;/li&gt;    &lt;li&gt;    &lt;a href="http://www.alixixi.com"&gt;阿里西西四号导航&lt;/a&gt;    &lt;div&gt;&lt;p&gt;阿里西西，web开发之家！&lt;/p&gt;&lt;/div&gt;    &lt;/li&gt;    &lt;li &gt;    &lt;a href="http://www.alixixi.com"&gt;阿里西西五号导航&lt;/a&gt;    &lt;div&gt;&lt;p&gt;阿里西西，web开发之家！&lt;/p&gt;&lt;/div&gt;    &lt;/li&gt;    &lt;li&gt;    &lt;a href="http://www.zzjs.net"&gt;站长特效网&lt;/a&gt;    &lt;div&gt;&lt;p&gt;一流网页特效广告代码&lt;/p&gt;&lt;/div&gt;    &lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt; 
 
[解决办法]
...再来，我把4楼的代码补全。方便测试，小改一下样式，注意注释部分的改动即可。
HTML code&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style type="text/css"&gt;               .tab_on {        background-image: url(../images/ss.png);        background-repeat: no-repeat;        background-position: left top;        /*Begin for test*/        background-color: Salmon;        width : 70px;        /*End for test*/    }    .tab_off {        background-image: url(../images/rr.png);        background-repeat: no-repeat;        background-position: left top;        /*Begin for test*/        background-color:Teal;        width: 70px;        /*End for test*/    }        /*Begin for test*/        div{width: 70px;}       .small_mulu div{width: 800px;}              /*End for test*/    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="tab1_mulu"&gt;          &lt;!--      &lt;div class="tab_off" onmouseover="showTab(8, 1, 0)" id="Div1"&gt;&lt;a href="/"&gt;网赢首页&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 1)" id="Div2"&gt;&lt;a href="/Basic_services/"&gt;基础服务&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 2)" id="Div3"&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/"&gt;网站建设&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 3)" id="Div4"&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/"&gt;网站推广&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 4)" id="Div5"&gt;&lt;a href="/SEO/"&gt;SEO优化&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 5)" id="Div6"&gt;&lt;a href="#"&gt;综合方案&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 6)" id="Div7"&gt;&lt;a href="/wang-ying-shi-ji/"&gt;网赢快报&lt;/a&gt;&lt;/div&gt;     &lt;div class="tab_off" onmouseover="showTab(8, 1, 7)" id="Div8"&gt;&lt;a href="/jiameng/"&gt;加盟合作&lt;/a&gt;&lt;/div&gt;    --&gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 0)" onmouseout="init()"  id="nav1_0"&gt;&lt;a href="?mid=0"&gt;网赢首页&lt;/a&gt;&lt;/div&gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 1)" onmouseout="init()" id="nav1_1"&gt;&lt;a href="?mid=1"&gt;基础服务&lt;/a&gt;&lt;/div &gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 2)" onmouseout="init()" id="nav1_2"&gt;&lt;a href="?mid=2"&gt;网站建设&lt;/a&gt;&lt;/div&gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 3)" onmouseout="init()" id="nav1_3"&gt;&lt;a href="?mid=3"&gt;网站推广&lt;/a&gt;&lt;/div&gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 4)" onmouseout="init()" id="nav1_4"&gt;&lt;a href="?mid=4"&gt;SEO优化&lt;/a&gt;&lt;/div&gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 5)" onmouseout="init()" id="nav1_5"&gt;&lt;a href="?mid=5"&gt;综合方案&lt;/a&gt;&lt;/div&gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 6)" onmouseout="init()" id="nav1_6"&gt;&lt;a href="?mid=6"&gt;网赢快报&lt;/a&gt;&lt;/div&gt;        &lt;div class="tab_off" onmouseover="showTab(8, 1, 7)" onmouseout="init()" id="nav1_7"&gt;&lt;a href="?mid=7"&gt;加盟合作&lt;/a&gt;&lt;/div&gt;  &lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;div class="small_mulu"&gt;     &lt;div id="showTab1_0"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt; 欢迎来到网赢世纪，请选择你要的服务，徐州网站建设，徐州网站推广首选网赢世纪！ &lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;     &lt;div id="showTab1_1" style="display:none;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;&lt;a href="/domain/"&gt;域名注册&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Web_Hosting/"&gt;虚拟主机&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/E-mail/"&gt;企业邮箱&lt;/a&gt;&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;      &lt;div id="showTab1_2" style="display:none;"&gt;         &lt;ul class="showlist list3"&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/dao-hang-xing.asp"&gt;企业导航型网站建设方案&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/A-fang-an.asp"&gt;A级-企业形象型网站建设方案&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/AA-fang-an.asp"&gt;AA级-企业门户型网站建设方案&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Xuzhou-Wang-zhan-jian-she/AAA-fang-an.asp"&gt;AAA级-标准商务型网站建设方案&lt;/a&gt;&lt;/li&gt;        &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_3" style="display:none;margin-left:100px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/sogou.asp"&gt;搜狐推广&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/baidu.asp"&gt;百度推广&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/google.asp"&gt;谷歌竞价排名&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/xuzhou-wang-zhan-tui-guang/huicong.asp"&gt;慧聪网推广&lt;/a&gt;&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_4" style="display:none;margin-left:120px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;提升搜索引擎自然排名,服务于国内中小型有搜索引擎优化(seo)需求的企业&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_5" style="display:none;margin-left:300px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;暂时没有综合方案的活动，敬请期待！&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_6" style="display:none;margin-left:350px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=4"&gt;公司新闻&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=5"&gt;行业新闻&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=6"&gt;本地新闻&lt;/a&gt;&lt;/li&gt;             &lt;li&gt;&lt;a href="/Wang-ying-shi-ji/list.asp?classid=7"&gt;技术文章&lt;/a&gt;&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt;         &lt;div id="showTab1_7" style="display:none;margin-left:350px;"&gt;         &lt;ul class="showlist"&gt;             &lt;li&gt;网赢世纪欢迎您的加盟！徐州优秀互联网服务提供商，网站建设专家&lt;/li&gt;         &lt;/ul&gt;     &lt;/div&gt; &lt;/div&gt;     &lt;script type="text/javascript"&gt;        //---------begin for test----------------//        function Request(strName) {            var strHref = window.document.location.href;            var intPos = strHref.indexOf("?");            var strRight = strHref.substr(intPos + 1);            var arrTmp = strRight.split("&");            for (var i = 0; i &lt; arrTmp.length; i++) {                var arrTemp = arrTmp[i].split("=");                if (arrTemp[0].toUpperCase() == strName.toUpperCase())                    return arrTemp[1];            }            return "";        }        //when go to the tab-page, default to show this Tab         var menuId = Request("mid");        if (menuId) {            showTab(8, 1, menuId);        }        //when the mouse out        function init() {            if (menuId) {                showTab(8, 1, menuId);            }            else {                showTab(8, 1, 0);            }        }        //---------End for test----------------//               function showTab(total, channelid, id) {            for (var i = 0; i &lt; total; i++) {                var nav = document.getElementById('nav' + channelid + '_' + i);                var showTab = document.getElementById('showTab' + channelid + '_' + i);                if (i == id) {                    nav.className = 'tab_on';                    showTab.style.display = "";                }                else {                    nav.className = 'tab_off';                    showTab.style.display = "none";                }                //document.write("nav.className ");            }        }    &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

大家帮小弟我看看这个导航菜单切换的

热点推荐