有劳各位，帮忙给导航写个JS，或onmouseover事件

例子:
<ul class="nav">
<li class="home"><a href="/">首页</a></li>
<li class="f1"><a href="/?tag=f1">分类1</a></li>
<li class="f2"><a href="/?tag=f2">分类2</a></li>
<li class="f3"><a href="/?tag=f3">分类3</a></li>
<li class="f4"><a href="/?tag=f4">分类4</a></li>
</ul>比如说，一进首页，首页背景自动出来，点分类1, 分类1背景出来，首页背景隐藏。您可参考http://y.qq.com/#type=index这是网页QQ音乐导航。首页和分类   背景都不同，（背景在CSS定义）
这是网页QQ音乐的导航
<div class="navigation">
<ul>
<li class="nav_home" onmouseover="g_topChn.showSubMenu();"><a href="/y/static/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>首页</span></a></li>
<li class="nav_lib" onmouseover="g_topChn.showSubMenu('sub_lib');"><a href="/y/static/singer/index/all_hot_1.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>乐库</span></a></li>
<li class="nav_mv" onmouseover="g_topChn.showSubMenu('sub_mv');"><a href="/y/static/mv/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>MV</span></a></li>
<li class="nav_mymusic" onmouseover="g_topChn.showSubMenu('sub_mymusic');"><a href="/y/static/mymusic/mymusic_index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>我的音乐</span></a></li>
<li class="nav_software" onmouseover="g_topChn.showSubMenu('sub_software');"><a href="/y/static/down/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>软件下载</span></a></li>
</ul>
</div>这是网页QQ音乐导航的CSS
.navigation{width:500px;height:75px;position:absolute;top:0;left:170px;}
.navigation li{height:75px;margin-right:20px;float:left;}
.navigation li span{display:block;height:5px;font-size:0;text-indent:-999em;overflow:hidden;background:#fff;}
.navigation li a:hover span{background-image:url(http://imgcache.qq.com/mediastyle/musicprotal/img/frame_bg.png);background-repeat:no-repeat;}
.navigation li.nav_home{width:54px;}
.navigation li.nav_lib{width:54px;}
.navigation li.nav_mv{width:44px;}
.navigation li.nav_mymusic{width:91px;}
.navigation li.nav_software{width:109px;}
.navigation li a{background-image:url(http://imgcache.qq.com/mediastyle/musicprotal/img/frame_bg.png);background-repeat:no-repeat;display:block;height:75px;outline:none;}
.navigation li.nav_home a{background-position:0 -77px;}
.navigation li.nav_lib a{background-position:-74px -77px;}
.navigation li.nav_mv a{background-position:-314px -77px;}
.navigation li.nav_mymusic a{background-position:-378px -77px;}
.navigation li.nav_software a{background-position:-489px -77px;}.navigation li.nav_home a:hover span{background-position:0 -77px;}
.navigation li.nav_lib a:hover span{background-position:-74px -77px;}
.navigation li.nav_mv a:hover span{background-position:-314px -77px;}
.navigation li.nav_mymusic a:hover span{background-position:-378px -77px;}
.navigation li.nav_software a:hover span{background-position:-489px -77px;}有劳给位，弄好了再发。最好给个整个HTML并注释。谢谢

解决方案 »

  1.   

     完整效果如下，经过测试应该是你想要的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
            .navigation
            {
                width: 500px;
                height: 75px;
                position: absolute;
                top: 0;
                left: 170px;
            }
            .navigation li
            {
                height: 75px;
                margin-right: 20px;
                float: left;
            }
            .navigation li span
            {
                display: block;
                height: 5px;
                font-size: 0;
                text-indent: -999em;
                overflow: hidden;
                background: #fff;
            }
            .navigation li a:hover span
            {
                background-image: url(http://imgcache.qq.com/mediastyle/musicprotal/img/frame_bg.png);
                background-repeat: no-repeat;
            }
            .navigation li.nav_home
            {
                width: 54px;
            }
            .navigation li.nav_lib
            {
                width: 54px;
            }
            .navigation li.nav_mv
            {
                width: 44px;
            }
            .navigation li.nav_mymusic
            {
                width: 91px;
            }
            .navigation li.nav_software
            {
                width: 109px;
            }
            .navigation li a
            {
                background-image: url(http://imgcache.qq.com/mediastyle/musicprotal/img/frame_bg.png);
                background-repeat: no-repeat;
                display: block;
                height: 75px;
                outline: none;
            }
            .navigation li.nav_home a
            {
                background-position: 0 -77px;
            }
            .navigation li.nav_lib a
            {
                background-position: -74px -77px;
            }
            .navigation li.nav_mv a
            {
                background-position: -314px -77px;
            }
            .navigation li.nav_mymusic a
            {
                background-position: -378px -77px;
            }
            .navigation li.nav_software a
            {
                background-position: -489px -77px;
            }
            
            .navigation li.nav_home a:hover span
            {
                background-position: 0 -77px;
            }
            .navigation li.nav_lib a:hover span
            {
                background-position: -74px -77px;
            }
            .navigation li.nav_mv a:hover span
            {
                background-position: -314px -77px;
            }
            .navigation li.nav_mymusic a:hover span
            {
                background-position: -378px -77px;
            }
            .navigation li.nav_software a:hover span
            {
                background-position: -489px -77px;
            }
        </style>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script>
            $(function () {
                $(".nav_home").css("background", "blue"); //假设这个就是初始化那个首页被选中的样式        });
            function showBackground(obj) {
                var classValue = $(obj).attr("class");            $("ul").find("li").each(function () {
                    var subClass = $(this).attr("class");
                    if (classValue == subClass)
                        $("." + subClass).css("background", "blue");
                    else
                        $("." + subClass).css("background", "");
                });
            }
        </script>
    </head>
    <body>
        <div class="navigation">
            <ul>
                <li class="nav_home" onclick="showBackground(this)" onmouseover="showSubMenu();"><a
                    href="/y/static/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>首页</span></a></li>
                <li class="nav_lib" onclick="showBackground(this)" onmouseover="showSubMenu('sub_lib');">
                    <a href="/y/static/singer/index/all_hot_1.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame">
                        <span>乐库</span></a></li>
                <li class="sub_mv" onclick="showBackground(this)" onmouseover="showSubMenu('sub_mv');">
                    <a href="/y/static/mv/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame"><span>
                        MV</span></a></li>
                <li class="nav_mymusic" onclick="showBackground(this)" onmouseover="showSubMenu('sub_mymusic');">
                    <a href="/y/static/mymusic/mymusic_index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame">
                        <span>我的音乐</span></a></li>
                <li class="nav_software" onclick="showBackground(this)" onmouseover="showSubMenu('sub_software');">
                    <a href="/y/static/down/index.html?pgv_ref=qqmusic.y.topmenu" target="contentFrame">
                        <span>软件下载</span></a></li>
            </ul>
        </div>
    </body>
    </html>
      

  2.   


    <script>
            $(function () {
                $(".nav_home").css("background", "blue"); //假设这个就是初始化那个首页被选中的样式
     
            });
            function showBackground(obj) {
                var classValue = $(obj).attr("class"); //这里是获取当前所点击菜单的class
     
                $("ul").find("li").each(function () {
                    var subClass = $(this).attr("class");   //遍历所有的菜单 
                    if (classValue == subClass)             
                        $("." + subClass).css("background", "blue"); //给当前所点击的加上样式 ，就是那个所谓的背景 ，你这里换成对应的背景class 就好了
                    else
                        $("." + subClass).css("background", ""); 去掉其它导航菜单的背景
                });
            }
        </script>
      

  3.   

    按照我下面的HTML，写个JS
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>导航</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    .nav{
    width: 406px;
    height: 75px;
    margin: 220px auto 0px;
    padding:0px;
    }
    .nav li{
    float: left;
    width: 54px;
    margin: 0px 27px 0px 0px;
    padding:0px;
    list-style-type: none;
    }.nav li a{
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 50px 0px 10px 0px;
    }
    /* ===== 字体颜色 ===== */
    .nav .home a{color: #990000;}
    .nav .f1 a{color: #FF0000;}
    .nav .f2 a{color: #0000FF;}
    .nav .f3 a{color: #FF9966;}
    .nav .f4 a{color: #9966FF;}
    /* =====  鼠标移上去的颜色 =====*/
    .nav .home a:hover{
    color: #FFFFFF;
    background-color: #990000;
    }
    .nav .f1 a:hover{
    color: #FFFFFF;
    background-color: #FF0000;
    }
    .nav .f2 a:hover{
    color: #FFFFFF;
    background-color: #0000FF;
    }
    .nav .f3 a:hover{
    color: #FFFFFF;
    background-color: #FF9966;
    }
    .nav .f4 a:hover{
    color: #FFFFFF;
    background-color: #9966FF;
    }/* ===== OK,在下面定义点击后的背景样式，和a:hover背景颜色一样(我不会在JS定义颜色 - -，我看人家QQ音乐导航就用“a.nonce”定义点击后的样式，例如: .nav .home a.nonce{background-color: #990000;} ) ======*/.nav .home {}
    .nav .f1   {}
    .nav .f2   {}
    .nav .f3   {}
    .nav .f4   {}
    </style>
    </head>
    <body>
    <ul class="nav">
    <li class="home"><a href="/">首页</a></li>
    <li class="f1"><a href="/?tag=f1">分类1</a></li>
    <li class="f2"><a href="/?tag=f2">分类2</a></li>
    <li class="f3"><a href="/?tag=f3">分类3</a></li>
    <li class="f4"><a href="/?tag=f4">分类4</a></li>
    </ul>
    </body>
    </html>
      

  4.   

    这种效果？就是访问到哪个页面显示的效果直接是hover的？？我这里为了测试简单就将页面名称改为xx.html了，你将下面的内容保存到xx.html文件中查看效果，如果是你要的效果去掉连接中的xx.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>导航</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    .nav{
        width: 406px;
        height: 75px;
        margin: 220px auto 0px;
        padding:0px;
    }
    .nav li{
        float: left;
        width: 54px;
        margin: 0px 27px 0px 0px;
        padding:0px;
        list-style-type: none;
    }
      
    .nav li a{
        display: block;
        text-decoration: none;
        text-align: center;
        padding: 50px 0px 10px 0px;
    }
      
      
    /* ===== 字体颜色 ===== */
    .nav .home a{color: #990000;}
    .nav .f1 a{color: #FF0000;}
    .nav .f2 a{color: #0000FF;}
    .nav .f3 a{color: #FF9966;}
    .nav .f4 a{color: #9966FF;}
      
      
    /* =====  鼠标移上去的颜色 =====*/
    .nav .home a:hover,.nav .home a.focus{/*--多增加一个焦点样式，和hover效果一样，下面的同理---*/
        color: #FFFFFF;
        background-color: #990000;
    }
    .nav .f1 a:hover,.nav .f1 a.focus{
        color: #FFFFFF;
        background-color: #FF0000;
    }
    .nav .f2 a:hover,.nav .f2 a.focus{
        color: #FFFFFF;
        background-color: #0000FF;
    }
    .nav .f3 a:hover,.nav .f3 a.focus{
        color: #FFFFFF;
        background-color: #FF9966;
    }
    .nav .f4 a:hover,.nav .f4 a.focus{
        color: #FFFFFF;
        background-color: #9966FF;
    }
    </style>
    </head>
    <body>
    <ul class="nav" id="nav">
    <li class="home"><a href="xx.html">首页</a></li>
    <li class="f1"><a href="xx.html?tag=f1">分类1</a></li>
    <li class="f2"><a href="xx.html?tag=f2">分类2</a></li>
    <li class="f3"><a href="xx.html?tag=f3">分类3</a></li>
    <li class="f4"><a href="xx.html?tag=f4">分类4</a></li>
    </ul>
    <script>
        var search = location.search//////////
        var as = document.getElementById('nav').getElementsByTagName('a');
        if (search != '') {
            for (var i = 0; i < as.length; i++)
                if (as[i].href.indexOf(search) != -1) {//连接包含当前页面名称则设置获得焦点
                    as[i].className = 'focus'; break;
                }
        }
        else as[0].className = 'focus'; //没有参数怎默认首页
    </script>
    </body>
    </html>
      

  5.   

    就是这种效果，版主真给力，还有ILOVE_ASPNET，每次都是你们俩帮我，就给版主70分，你30吧