javascript 基础 导航高亮

function highLightPage() {
    // 简单检测
    if(!document.getElementById) return false;
    if(!document.getElementsByTagName) return false;
    // 取得目标a并且遍历
    var header = document.getElementsByTagName("header");
    if(header.length == 0) return false;
    nav = header[0].getElementsByTagName("nav");
    if(nav.length == 0) return false;

    var links = nav[0].getElementsByTagName("a");
    var url;
    for(var i=0;i<links.length;i++){
        link_url = links[i].getAttribute("href");
        if(window.location.href.indexOf(link_url) != -1){ //如果当前页面链接包含link_url 则添加class name
            links[i].className = "here";
            // 附加把链接的文本节点转换成小写 并给body添加这个属性
            var link_text = links[i].lastChild.nodeValue.toLowerCase();
            document.body.setAttribute("id",link_text);
        }
    }
}

string.indexOf(substring) 这是一个字符匹配方法 从string中去匹配substring 返回值如果是-1代表没有找到 如果是其他 则代表成功匹配

在开发中 我们一般会搞一个tmplate 作为一个模版 这个模版包含的东西都是所有网页所共同的东西 先把所有页面通过tmplate快速构建 我们可以测试一些js插件是否运行成功

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

通过这个呢 我们可以在css里预设好样式 随着body ID的改变而改变样式
比如

#about header{
    background-image: url("../../images/lineup.gif");
}