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

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

<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

 

评论

5 条对“js+css结合高亮导航当前页链接”的回复

  1. 大大的小蜗牛 的头像

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

    大大的小蜗牛 的最新文章:联系方式
  2. sirenyan 的头像
    sirenyan

    为了服务人了民嘛…哈哈..

  3. sirenyan 的头像
    sirenyan

    欢迎下次再来!!

  4. clisun 的头像

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

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注