javascript添加ID实现识别当前页

该例程在英文时较灵活：

   < div  id ="navigation" >
     < ul >
       < li >< a  href ="index.html" > Home </ a ></ li >
       < li >< a  href ="about.html" > About </ a ></ li >
       < li >< a  href ="photos.html" > Photos </ a ></ li >
       < li >< a  href ="live.html" > Live </ a ></ li >
       < li >< a  href ="contact.html" > Contact </ a ></ li >
     </ ul >
   </ div >

相应的脚本：

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) ...{
      links[i].className = "here";
      var linktext = links[i].lastChild.nodeValue.toLowerCase();
      document.body.setAttribute("id",linktext);
    }
  }
}
window.onload  =  highlightPage;

样式表：

#navigation a.here:link,
#navigation a.here:visited,
#navigation a.here:hover,
#navigation a.here:active  {...} {
  color: #eef;
  background-color: #799;
}
#about #header  {...} {
  background-image: url(../images/lineup.gif);
}
#photos #header  {...} {
  background-image: url(../images/basshead.gif);
}
#live #header  {...} {
  background-image: url(../images/bassist.gif);
}
#contact #header  {...} {
  background-image: url(../images/drummer.gif);
}

实际应用中使用中文：

   < div  id ="navigation" >
     < ul >
       < li >< a  href ="index.html" > 主页 </ a ></ li >
       < li >< a  href ="about.html" > 关于 </ a ></ li >
       < li >< a  href ="photos.html" > 图片 </ a ></ li >
       < li >< a  href ="live.html" > 演唱会 </ a ></ li >
       < li >< a  href ="contact.html" > 留言 </ a ></ li >
     </ ul >
   </ div >

 

这就使得添加BODY元素ID的操作失效：

       var  linktext  =  links[i].lastChild.nodeValue.toLowerCase();
      document.body.setAttribute( " id " ,linktext);

于是尝试改用提取a元素的href属性值：

  var  linktext  =  split(links[i].getAttribute( " href " ).toLowerCase(), " . " )[ 0 ]; 
 document.body.setAttribute( " id " ,linktext); 

此方法在FireFox下可以正常的工作，但是放到IE中，发现IE将自动为链接添加完整的路径，因为是在本地测试，所以返回的完整路径将会是非常长的。不知道IE在什么情况下才能不这么“活泼”。

最后只好使用其他方法：

 

       switch (links[i].lastChild.nodeValue) ... {
        case("关于"):
          var linktext = "about";
          break;
        case("图片"):
          var linktext = "photos";
          break;
        case("演唱会"):
          var linktext = "live";
          break;
        case("留言"):
          var linktext = "contact";
          break;
        default:
          var linktext = "home";
          break;
      }
      document.body.setAttribute( " id " ,linktext);

但是这样失去了一些灵活性，以后如果修改页面还需要修改脚本。