导航菜单高亮显示代码DEMO

使用方法：

1.首先将以下代码插入到你body需要设置导航的地方

    
<!--js 高亮显示导航栏代码，通用方式，包括所在内容页-->
    
    
<div id="navmenu">
    
    
    <ul id="navi">
    
    
        <li><a href="0.htm">梧桐首页</a></li>
    
    
        <li><a href="1.htm">网站优化</a></li>
    
    
    </ul>
    
    
</div>
    
    
<!--NAV-->
    
    
<script type="text/javascript" language="javascript">
    
    
  var nav = document.getElementById("navi");
    
    
  var links = nav.getElementsByTagName("li");
    
    
  var lilen = nav.getElementsByTagName("a"); //判断地址
    
    
  var currenturl = document.location.href;
    
    
  var last = 0;
    
    
  for (var i=0;i<links.length;i++)
    
    
  {
    
    
      var linkurl = lilen[i].getAttribute("href");
    
    
          if(currenturl.indexOf(linkurl)!=-1)
    
    
              {
    
    
              last = i;
    
    
              }
    
    
  }
    
    
  links[last].className = "navon"; //高亮代码样式
    
    
</script> 

 

 

 

2.然后将以下CSS代码添加到你网站的CSS文件中

 

 

    
#navmenu{ width:980px;}
    
    
#navmenu ul{ padding:0px; margin:0px;}
    
    
#navmenu ul li{ float:left; width:80px; list-style:none; text-align:center; height:30px; line-height:30px;}
    
    
.navon{ background:#000000;}
    
    
.navon a{ color:#ffffff;}