獲取當(dāng)頁URL并比給相同的元素添加class
預(yù)覽地址：獲取當(dāng)頁URL并比給相同的元素添加class
有時候我們想讓當(dāng)前頁面的鏈接名有個不同的樣式（如圖）散罕，但是某些CMS程序有沒有提供這種方法屯蹦，也或許提供了，但是因為一些調(diào)用的原因沒辦法自動添加這個樣式例隆，基于這種問題弥搞，今天漠白寫了個小函數(shù)邮绿，可以實現(xiàn)渠旁，具體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){
//判斷是否存在與當(dāng)前頁鏈接相同的linkurl，如果存在就給這個元素添加新的class
links[i].className += 'current';
}
}
}
currentPageLink();
不過為了在其他場景下能方便使用斯碌，我把這個函數(shù)抽象了一下一死，可以獨立保存成一個js文件，調(diào)用的時候傳入?yún)?shù)即可傻唾，如下：
function currentPageLink(links,newClass){
//第一個參數(shù)是要添加class的元素投慈，第二個參數(shù)是class的值
for (var i = 0; i < links.length; i++) {
//獲取URL
var linkurl = links[i].getAttribute('href')
if(window.location.href.indexOf(linkurl) != -1){
//判斷是否存在與當(dāng)前頁鏈接相同的linkurl，如果存在就給這個元素添加新的class
links[i].className += newClass;
}
}
}
調(diào)用方法：
var links = document.getElementsByTagName('a');
currentPageLink(links,'current');
//這里要注意下冠骄，如果元素本身已經(jīng)有class的話伪煤，記得傳參的時候加一個空格,像下邊這樣：
//currentPageLink(links,' current');
