js+css结合高亮导航当前页链接

2010-9-26 17:10

176

很多朋友在做网站的时候可能遇到这样一个问题，如何高亮导航当前页链接以下是代码

<script type="text/javascript">

function currentpage(){
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById('nav')) return false;
    var nav = document.getElementById('nav');
    var links = nav.getElementsByTagName('a');
    for (var i=0;i<links.length;i++){
        var linkurl =  links[i].getAttribute('href');
        var currenturl = document.location.href;
            if(currenturl.indexOf(linkurl)!=-1){
                links[i].className = 'on';
                return true;
            }
    }
}

</script>

<style type="text/css">
#nav li a, #nav li a:hover {
    background: #f60;
    color: #fff;
}
#nav li a.on, #nav li a:hover.on {
    background: #000;
    color: #6f0;
}
</style>
<div id="nav">
  <ul>
    <li><a title="首页" href="1.html" >首页</a></li>
    <li><a title="日志" href="2.html">日志</a></li>
    <li><a title="链接" href="3.html">链接</a></li>
  </ul>
</div>
<script type="text/javascript">currentpage();</script>

相关资料:http://sakuracomic.spaces.live.com/blog/cns!97fd0e4f75f1d939!326.entry

大大的小蜗牛

15 年前
2010-9-27 0:52:04

下载放这里就不怕把流量用光啊。

大大的小蜗牛 的最新文章:联系方式
sirenyan

15 年前
2010-9-27 8:39:36

为了服务人了民嘛…哈哈..
我爱眼镜网

15 年前
2010-9-28 13:57:46

路过学习一下

我爱眼镜网 的最新文章:数十家太阳镜厂商备战团购惊爆低价折扣促销
sirenyan

15 年前
2010-9-28 15:15:23

欢迎下次再来!!
clisun

13 年前
2012-5-22 18:32:20

if(currenturl.indexOf(linkurl)!=-1){
建议换成currenturl==linkurl
如果主页放在首位会有问题。

clisun 的最新文章:apache无法启动的问题