<!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>按照你的做法,去掉xx.html有效果,但是:例如:
<ul class="nav" id="nav">
<li class="home"><a href="http://localhost/">首页</a></li>
<li class="f1"><a target="_blank" href="http://localhost/?tag=f1">分类1</a></li>
<li class="f2"><a href="http://localhost/?tag=f2">分类2</a></li>
<li class="f3"><a href="http://localhost/?tag=f3">分类3</a></li>
<li class="f4"><a href="http://localhost/?tag=f4">分类4</a></li>
</ul>这样就没效果了 (比如;?tag=f1 有效果,加个/就没效果了,/?tag=f1没效果

解决方案 »

  1.   

    版主正在吃饭呢,我觉得吧,是你引用路径问题,http://localhost/?tag=f1并不能连接到该页面
      

  2.   

    好吧,用过博客吗?博客的标签都是/?tag=XXXXX 
      

  3.   

    我建立了个localhost的站点测试没有问题哦你的是不是中文标签啊。。如果是的话浏览器上的地址栏的中文编码过了,和页面的对比是不行的。。
      

  4.   

    版主,是我的问题,奇了怪了,我在虚拟主机上就行http://guchonglin.hk.zmisp.com/,本地搭建的就不行,