本人前端小白一枚，初步接觸前端知識一個月。從今天開始將在部落格上分享一下我每日工作中遇到的一些問題和相應的解決，以幫助自己更好的學習和成長。


今天在製作網頁頂部公共導航時，遇到這樣一個問題，我需要在a標籤點選跳轉頁面後，為被點選的a標籤新增樣式。
增添樣式如下：

.selected{ display:block;background-color: #E31D2C;color:#fff;}

剛開始js我是這樣寫的：

$(".top_menu li a").on("click", function () {
   $(this).addClass("selected").siblings().removeClass("selected");
});

發現由於頁面跳轉，a的預設target屬性為_self，即跳轉頁面載入當前框架集和視窗中，只有在跳轉的瞬間能看到所寫樣式生效。
於是我將target修改為_blank，能發現新視窗中樣式不生效，舊視窗中樣式已經起效。
經過蒐集資料，我找到了合適的解決方法。


（該答案來自網路，如果侵權請聯絡本人刪除相關內容）
有幾種辦法：
1. 用cookie記錄這個開啟的序列號，然後頁面在跳轉的時候在讀出來。
2. 迴圈a的連結，然後與location.href去比對，如果相同，或包含有同樣字串序列，則新增className.
3. 給每個頁面寫一個頁面的id值，然後每次判斷，有值則addClass
我選擇了第二種方法，於是我修改自己的js如下：

    var url = window.location.href;
    $("a").each(function () {
        if (returnUrl($(this).attr("href")) == returnUrl(url)) {
            console.log($(this));
            $(this).addClass("selected");
        }
    });
    //以下為擷取url的方法
    function returnUrl(href) {
        var number = href.lastIndexOf("/");
        return href.substring(number + 1);
    }
 

該方法主要是通過擷取url中"/"後的內容，與a中href的跳轉地址進行對比，如果一致，則該a標籤新增selected樣式。

確實還有很多簡便可用的方法，今天我只試用了這一種。

下次我會嘗試在各個連結上面都加個引數，獲取這個引數並匹配到對應的選單上的方法。