还得麻烦showbo版主，指点一下我那个导航

lao2nb 2012-11-21 05:21:54

<!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>

这样就没效果了