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 评论

留下评论

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