本文的思路是使用JQuery重寫SharePoint自帶託管導航的樣式，其實思路和指令碼都非常簡單，引用一下JQuery指令碼，然後重寫導航的樣式，把指令碼放到母版頁中，即可。當然，使用JQuery可以做很炫的導航，還是要看你的JQuery功底了，筆者前臺比較弱，JQuery也不經常使用，只是簡單例子介紹使用方法，還請勿見笑。

　　之前看到一篇類似的部落格，是使用Asp.net讀取當前導航，然後解析html用JQuery重寫的，看到裡面的程式碼也不是很完整，實踐起來比較有難度，不如在頁面上直接操作DOM物件，來實現我們想要的效果。特別要說的是，SharePoint預設只支援三級導航，暫時我還沒有發現，如何繼續擴充套件，下面，進入圖文描述。

　　1、 用SPD（SharePoint Designer 2013）開啟網站，找到母版頁，在高階模式下編輯檔案；

　　2、 將指令碼拷貝到伺服器目錄，在Layouts目錄下建立一個MyScript資料夾；

　　如下圖，兩個JQuery庫的檔案，一個是指令碼檔案（當然，你可以直接將指令碼放到母版頁中，也沒問題，但是需要SPD開啟母版頁，才能編輯指令碼，這樣記事本就可以了）；

　　3、 在母版頁中新增指令碼引用，我新增到了head節點裡面了，如下圖；

　　4、 找到頂部導航，在外面套一個div標籤，寫上一定要不重複的id，方便JQuery獲取；

　　5、 編寫引用的Navigation.js指令碼，如下圖：

　　6、 儲存指令碼，檢視效果，如下圖：

　　特：加上$("#OlderNavigationMenu li[class*='editArea']").css({"display":"none"});可以將後面的編輯連結隱藏；

       7、 同樣的方法，還可以修改左側導航，檢視效果，如下圖：

結束語

　　本文介紹的就是一個思路，沒太在意效果，有需要的可以自己去調整樣式或者寫很炫的指令碼，好了，就到這裡，希望對大家有所幫助。

附  錄