对动态导航进行当前页面的标识的解决办法

在ASPCMS中，一个栏目下子分类的导航显示是以这样的方式展现：

动态生成，我们无法直接对明确的指向当前页面li元素添加值为"currclass"的class属性。

 

　　这里我有两种解决方式：

• 在参考对比原始模板后发现，可以在<li>标签里根据页面类型的sort添加动态判断语句,如图：

　　　

  　　OK,可以在浏览器中看到：

　　　

 

• 另一种方法使用Javascript,最近在看经典的《javascript dom 编程艺术》，其中对此提出过解决方法，主要是对比a标签的href属性值与当前URL相匹配，从而添加class属性：

　　　　

　　　　下面是编写的相应js代码：

　　　　　　

/**
 * Created by zhenxin on 2015/10/29.
 */
function changeNav(){
    if(!document.getElementById) return false;
    if(!document.getElementById("aboutlist")) return false;
    var aboutList =  document.getElementById("aboutlist");
    var links = aboutList.getElementsByTagName("a");
    var lists = aboutList.getElementsByTagName("li");
    for(var i = 0; i<links.length; i++){
        var linkurl = links[i].getAttribute("href");
        var currenturl = window.location.href;
        if(currenturl.indexOf(linkurl) != -1){
            addClass(lists[i],"currclass")
        }
    }

}
function addClass(element,value){
    if(!element.className){
        element.className = value;
    }else{
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}
function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    }else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}
addLoadEvent(changeNav);

效果也很好。