html 通用導航 a連接跳轉時給當前導航添加選中顏色

學習前端的同窗或許會遇到這個問題

作一個基本的小站有幾個導航的,以下圖

不管有幾個頁面,這裏的導航的樣式都是同樣,惟一不一樣的就是進入哪一個頁面時當前有個選中的樣式

通常這樣通用的導航在開發的時候都會封裝,而後公用的地方就引用,可是在跳轉的時候這個選中的效果就比較棘手了

固然了也有一個簡單的方法,就是每一個頁面複製一個導航,而後給當前頁面的連接里加上class

下面推薦一個jq的寫法

$(".nav li a").each(function () {
    if ($(this)[0].href == String(window.location)) {
        $(this).addClass("on").siblings().removeClass("on");
    }
});

這樣就能解決了, 演示地址:   https://xibushijie.github.io/static/href/1.html