武冈论坛官方博客

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

  很多朋友在做网站的时候可能遇到这样一个问题，如何高亮导航当前页链接 
  以育儿网新版导航条来举例
  大家可以看到“首页”2个字做了高亮处理。 

  <div id=”navi”>
          <ul>
              <li><a target=”_blank” title=”首页” href=”http://www.ci123.com/” class=”on” ><span>首页</span></a></li>
              <li><a target=”_blank” title=”父母学堂” href=”http://www.ci123.com/index1.html”><span>父母学堂</span></a></li>
              <li><a target=”_blank” title=”育儿论坛” href=”http://bbs.ci123.com”><span>育儿论坛</span></a></li>
              <li><a target=”_blank” title=”宝宝主页” href=”http://baobao.ci123.com”><span>宝宝主页</span></a></li>
              <li><a target=”_blank” title=”育儿博客” href=”http://blog.ci123.com”><span>育儿博客</span></a></li>
              <li><a target=”_blank” title=”育儿问答” href=”http://ask.ci123.com”><span>育儿问答</span></a></li>
              <li><a target=”_blank” title=”许愿树” href=”http://tree.ci123.com”><span>许愿树</span></a></li>
              <li><a target=”_blank” title=”亲子资源” href=”http://rs.ci123.com”><span>亲子资源</span></a></li>
              <li><a target=”_blank” title=”城市伙伴” href=”http://www.ci123.com/baodian”><span>育儿宝典</span></a></li>
              <li class=”end”><a target=”_blank” title=”活动吧” href=”http://www.ci123.com/huod-bar.html”><span>活动吧</span></a></li>
          </ul>
      </div> 

  蓝色加下划线的地方，就是用来区别“首页”这个链接和其它链接的不同样式的class。

  #navi li a.on,#navi li a:hover{
      background: url(images/navi.gif) top left no-repeat;
      color: Red;
  }#navi li a.on  span,#navi li a:hover span{
      background: url(images/navi.gif);
          background-position: right 25px;
      padding-top: 2px;
  }a 里面的 span 标签是为了实现滑动门效果的。具体可以看CSS滑动门技术这篇文章。下面继续。如果是单个页面，设置这样的效果只要按上面的方法，在需要高亮度链接标识出特定的class就可以了。但在大型网站中，因为频道和页面众多，如果每个频道的头部都为此单独去做一个只是高亮部位不同的文件，那维护起来必然是非常繁琐的。因此，我们将头部分离出来，放入服务器单独的目录，再让各个频道去引用这个单独的文件。这样在维护的时候，就可以一次修改。多次使用。具体引用的方式在不同的语言和架构上有不同的方法，这个和我们要说的东西又是另一回事。回到这里，如果是引用的同一个头部文件，那么就没有办法给每个链接区按一个class，那又如何按频道高亮呢。下面有个函数：function highlightPage(){
      if(!document.getElementsByTagName) return false;
      if(!document.getElementById) return false;
      if(!document.getElementById(’navi’)) return false;
      var nav = document.getElementById(’navi’);
      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;
              }
      }
  }这个js的前三行，是用于判断dom上的节点是否能取到，以及浏览器对document.getElementsById方法的支持程度。 

  到了第三行开始，建立了一个 nav的变量，并给它赋值document.getElementById(’navi’)。 

  navi是唯一的。而它下面的诸多a 标签，用links[]这个数组再进行赋值。 

  赋值完成后，就开始遍历。一遍links的数组，每遍历一个数组成员，都用 links[i].getAttribute(’href’) 将这个成员的’href’属性值取出，放入临时变量linkurl,同时用l将页面当前的地址也取出放入currenturl这个变量。 

  如http://www.ci123.com/  因为基本网页的实际地址长度都会大于页面代码href的里面所写的路径，所以我们用indexOf这个方法来判断 currenturl 里面是否包含 linkurl的字符串，如果结果为true,我们就给这个链接的className赋值’on’ 设定它为当前链接。然后返回。 

  这样开头的那个高亮效果就实现了。

  -----------------------------------------------------------------------------------------------

  <script>
  function addloadEvent(fun){
      var olonload=window.onload;
      if(typeof window.onload!='function'){
          window.onload=fun;
      }else{
          window.onload=function(){
              olonload();
              fun();
          }
      }
  }
  function highlightpage(){
      if(!document.getElementsByTagName) return false;
      if(!document.getElementById) return false;
      if(!document.getElementById("navigation")) return false;
      var nav=document.getElementById("navigation");
      var links = nav.getElementsByTagName("a");
      for(var i=0;i<links.length;i++){
          var linkurl=links[i].getAttribute("href");
          var currenturl= window.location.href;
         if(currenturl.indexOf(linkurl)!=-1){
                   var a=linkurl.lastIndexOf("/")+1
                  var b=linkurl.lastIndexOf(".")
                  var c=linkurl.substring(a, b)
              links[i].className=c;
          }
      }
  }
  addloadEvent(highlightpage);
  </script>
  <style>
  a.nava:{}
  a.navb:visited{color:red}
  a.navc:{}
  a.navd:{}
  </style>
  <div id="navigation">
  <ul>
  <li><a href="nava.htm">111</a></li>
  <li><a href="navb.htm">222</a></li>
  <li><a href="navc.htm">333</a></li>
  <li><a href="navd.htm">444</a></li>
  </ul>
  </div>