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);

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