获取当页URL并比给相同的元素添加class

获取当页URL并比给相同的元素添加class

预览地址：获取当页URL并比给相同的元素添加class

有时候我们想让当前页面的链接名有个不同的样式（如图），但是某些CMS程序有没有提供这种方法，也或许提供了，但是因为一些调用的原因没办法自动添加这个样式，基于这种问题，今天漠白写了个小函数，可以实现，具体js代码如下：

function currentPageLink(){
    var links = document.getElementsByTagName('a');
    //获取元素
    for (var i = 0; i < links.length; i++) {
        var linkurl = links[i].getAttribute('href')
        //获取元素URL
        if(window.location.href.indexOf(linkurl) != -1){
        //判断是否存在与当前页链接相同的linkurl，如果存在就给这个元素添加新的class
            links[i].className += 'current';
        }
    }
}
currentPageLink();

不过为了在其他场景下能方便使用，我把这个函数抽象了一下，可以独立保存成一个js文件，调用的时候传入参数即可，如下：

function currentPageLink(links,newClass){
//第一个参数是要添加class的元素，第二个参数是class的值
    for (var i = 0; i < links.length; i++) {
        //获取URL
        var linkurl = links[i].getAttribute('href')
        if(window.location.href.indexOf(linkurl) != -1){
        //判断是否存在与当前页链接相同的linkurl，如果存在就给这个元素添加新的class
            links[i].className += newClass;
        }
    }
}

调用方法：

var links = document.getElementsByTagName('a');
currentPageLink(links,'current');
//这里要注意下，如果元素本身已经有class的话，记得传参的时候加一个空格,像下边这样：
//currentPageLink(links,' current');