做網(wǎng)站的過(guò)程中，我們往往需要給當(dāng)前菜單項(xiàng)添加一個(gè) CSS 類（如 active 或 current ），然后給這個(gè) CSS 類寫(xiě)一些樣式，以標(biāo)明用戶位置。這對(duì)提高網(wǎng)站的用戶體驗(yàn)度是有好處的，用戶一眼就能看出來(lái)當(dāng)前處于哪個(gè)頁(yè)面。

如果你使用的是 WordPress 內(nèi)置的菜單功能添加的菜單，就不用往下看了，因?yàn)?WordPress 會(huì)自動(dòng)添加一個(gè) current-menu-item 的 CSS 類到當(dāng)前頁(yè)面的菜單，本例子中的代碼適合那些把菜單寫(xiě)死在頁(yè)面中的情況。下面我們來(lái)看一下實(shí)現(xiàn)這個(gè)需求需要的代碼。

jQuery(function(){
       jQuery("a").each(function(){ //這里是選擇頁(yè)面上所有的鏈接，可根據(jù)實(shí)際需要縮小選擇范圍
               if (jQuery(this).attr("href") == location.href){ //如果瀏覽器打開(kāi)的網(wǎng)址和頁(yè)面中的鏈接地址相同
                       jQuery(this).addClass("selected"); //添加 selected 類到當(dāng)前鏈接上
               }
       });
});

會(huì)用 jQuery 的朋友通過(guò)代碼一眼就能看出來(lái)，以上功能實(shí)現(xiàn)的原理就是判斷當(dāng)前頁(yè)面的地址是都和頁(yè)面中的鏈接地址相同，如果相同，就添加一個(gè) selected 類到頁(yè)面中的鏈接上。

其實(shí) WordPress 內(nèi)置菜單添加 current-menu-item 的原理和上面的原理是類似的，只不過(guò) WordPress 是通過(guò)后端 PHP 代碼實(shí)現(xiàn)的，而本例子是通過(guò)前端 jQuery 實(shí)現(xiàn)的。