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

2010年9月26日网络教程

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

html

&lt;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;
            }
    }
}

&lt;/script>

&lt;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;
}
&lt;/style>
&lt;div id="nav">
  &lt;ul>
    &lt;li>&lt;a title="首页" href="1.html" >首页&lt;/a>&lt;/li>
    &lt;li>&lt;a title="日志" href="2.html">日志&lt;/a>&lt;/li>
    &lt;li>&lt;a title="链接" href="3.html">链接&lt;/a>&lt;/li>
  &lt;/ul>
&lt;/div>
&lt;script type="text/javascript">currentpage();&lt;/script>