求大神，用CSS+JS写一个类似QQ音乐的导航，跪求

http://y.qq.com/#type=index就是这个网站啊，貌似很简单啊，我就是不会JS，就是点击后保留选项，

明白楼主的意思了，你是想当点击后选中当前被点击的那个是吧举个栗子
<script>
        function showClick(obj) {
            for (var i = 1; i <=5; i++) {
                var id = $(obj).attr("id");                if (id == i) {
                    $(obj).css("background", "red");
                }                else {
                    $("#"+i).css("background", "");
                }

            }
        }    </script>
</head>
<body>
    <ul>
        <li onclick="showClick(this)" id="1">1111111</li>
        <li onclick="showClick(this)" id="2">2222222</li>
        <li onclick="showClick(this)" id="3">3333333</li>
        <li onclick="showClick(this)" id="4">4444444</li>
        <li onclick="showClick(this)" id="5">5555555</li>
    </ul>
</body>

1.能不能一打开网站，首页的背景就显示出来，然后点其他的，背景就消失。就和人家导航一样，
2.例子：
<ul class="nav">
<li class="home"><a href="/">首页</a></li>
<li class="f1"><a href="/">分类1</a></li>
<li class="f2"><a href="/">分类2</a></li>
<li class="f3"><a href="/">分类3</a></li>
<li class="f4"><a href="/">分类4</a></li>
</ul>我要 home,f1,f2,f3,f4 点击后背景不同背景在CSS定义

获取页面名称，然后根据名称获取到是哪个连接，设置背景色就好了<style>
.focus a{color:#fff;background:#000}
</style>
<ul id="nav">
<li ><a href="/">首页</a></li>
<li ><a href="/class1.html">分类1</a></li>
<li ><a href="/class2.html">分类2</a></li>
<li><a href="/class3.html">分类3</a></li>
<li ><a href="/class4.html">分类4</a></li>
</ul>
<script>
///给导航的页面增加下面的js就行了var pn=/\/([^\.]+\.html)/.exec(location.path);//如果你的页面名称不一样，修改这个正则
if(pn)pn=pn[1];//匹配获取文件名
var as=document.getElementById('nav').getElementsByTagName('a');
var match=false;
for(var i=0;i<as.length;i++)
  if(as[i].href.indexOf(pn)!=-1){//连接包含当前页面名称则设置获得焦点
     as[i].parentNode.className='focus';
     match=true;//存在匹配
   }else as[i].parentNode.className='';//去掉不配连接父节点的样式
if(!match)as[0].parentNode.className='focus';//没有匹配的则默认设置首页获取焦点
</script>

我的没有.html 后缀怎么办我网站是PHP的
例如；
<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>

是参数就更加简单了，直接location.search获取到查询参数<style>
.focus a{color:#fff;background:#000}
</style>
<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>
<script>
///给导航的页面增加下面的js就行了

var pn=location.search//////////
var as=document.getElementById('nav').getElementsByTagName('a');
var match=false;
for(var i=0;i<as.length;i++)
  if(as[i].href.indexOf(pn)!=-1){//连接包含当前页面名称则设置获得焦点
     as[i].parentNode.className='focus';
     match=true;//存在匹配
   }else as[i].parentNode.className='';//去掉不配连接父节点的样式
if(!match)as[0].parentNode.className='focus';//没有匹配的则默认设置首页获取焦点
</script>

大神啊，你这.focus 干啥用的，不管用，我用CSS定义了不行啊

CSS是这样写吗？.nav .focus .home a{color:#fff;background:#000}  首页默认样式
.nav .focus .f1 a{color:#aaa;background:#111}   f1 点击后的样式
.nav .focus .f2 a{color:#ccc;background:#222}   f2 点击后的样式
.nav .focus .f3 a{color:#ddd;background:#333}   f3 点击后的样式
.nav .focus .f4 a{color:#eee;background:#444}   f4 点击后的样式

焦点样式啊，浏览哪个页面就设置那个样式为focus

好像不管用，我看人家的代码用onmouseover事件
<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>

这种效果？就是访问到哪个页面显示的效果直接是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>

调试易

求大神，用CSS+JS写一个类似QQ音乐的导航，跪求

解决方案 »