這也是我經常採用的方式，一般的網頁至少都有兩級選單，第乙個是頂部的總導航條選單，另乙個是左側的分類導航選單。一般要求在一級選單高亮下二級選單也能記錄當前狀態。
對於乙個包含頂部選單的頁頭區域如果固定不變的，也就是它不用每次都重新載入，這種情況下用純css或js方式可以很容易地實現，但今天我要談的不是這種，今天說的是一級選單和二級選單在每個頁面中都是動態載入的，也就是它們是作為使用者控制項的方式載入的。這種情況下要想記錄選單的高亮狀態是一件比較困難的事情。
當然，你可能會說，用cookie可以記錄每個頁面載入時上次記錄的高亮狀態，是的，它確實可以記錄，但是這種方式在一些複雜的包含許多子頁面的應用中，會給使用者造成許多困擾和麻煩。比如在cookie生存週期內，重新開啟這個專案時，此時cookie的生存週期還沒有完全結束，它還記錄著上次儲存的狀態，而這時頁面位址已經發生了變化，那麼當前高亮的選單所指向的就不是使用者所希望看到的頁面。實踐證明，這個cookie的生存週期無論你設定多長都不能完美解決使用者惡意重新整理頁面的狀況。這確實是一件糟糕的事情！
那麼有沒有一種較好的辦法來解決這種狀況呢？
答案是有的。我們知道要解決這個問題，最理想的辦法是在每個頁面載入時，根據頁面的url位址顯式地設定當前選單的高亮樣式。這能完美地解決此類問題，並且這種方式無論使用者如何惡意點選重新整理按鈕，高亮狀態依舊保持不變。 知道了原理，要實現起來就容易多了。
結構層
一級選單結構層：
複製**
**如下:
可以看到在這個一級選單中，其鏈結位址一般是沒有引數值的。 二級選單的結構層：
複製**
**如下:
與一級選單不同的是，我們將二級選單中的鏈結位址加入兩個引數值，pid引數指向的是頂部一級選單的的序號，而sid則是選單自己的順序號。我們將這兩個選單的總容器ul都設定了兩個不同中的id，它們需要在js中呼叫，所以千萬不能少。
樣式層
關於樣式，其實都沒有什麼特別的地方，你可以隨心所意地設定成你想要的樣式，只是需要注意的地方是，我們需要單獨設定選單高亮的三種狀態樣式，以供js動態呼叫。
複製**
**如下:
/*一級選單的三種樣式設定*/
#menu li a.normal//普通樣式
#menu li a.over //翻滾樣式
#menu li a.cur //高亮樣式
/*二級選單的三種樣式設定*/
#othermenu li a.normal //普通樣式
#othermenu li a.over //翻滾樣式
#othermenu li a.cur //高亮樣式
行為層
因為要在行為層中控制選單的三種狀態，所以對於a鏈結標籤，我們就不使用hover偽類來達到選單的三種動態行為了，我們可以用onmouseover、onmouseout和onclick來模仿偽類的三種行為，這樣好便於js的動態調整。並且為了達到行為、樣式和結構的三層分離，我們也不用在a標籤的html中去加上動態的行為控制**，這不是一種良好的製作習慣。因此我們需要在頁面的載入函式上做點文章，這就需要使用到onload函式，當頁面一載入完後就動態繫結a標籤的三種行為狀態。
在頁面一載入完成後，我們首先獲取當前的頁面url字串，再根據這個字串和一二級選單中的a標籤的href位址進行對比，如果存在相同項，則高亮此選單項的樣式。
詳細的注釋說明我都在下面的函式中一一標註出來，在此就不一一細述了。關鍵函式**如下：
複製**
**如下:
//根據url位址的引數或字串高亮當前選單。
function hightlightmenu(firstmenuid,twomenuid)
else);
addeventhandler(obj,"mouseout",function());
})(i)
} }
//二級選單高亮
if (document.getelementbyid(twomenuid) != null)
} }
else
//二級選單高亮
if (document.getelementbyid(twomenuid) != null)
} }
} //高亮函式
function hightlight(elementarray,inumber,curmenuindex)
else );//增加滑鼠移上去時的事件
addeventhandler(obj, "mouseout", function());//增加滑鼠移走時的事件
})(inumber)
} }
經過如上一番設定，乙個通用、相容的高亮函式就誕生了，我們看看它的效果截圖：
本案例的高亮函式在如下瀏覽器中測試通過：
ie5.5,ie6,ie7,ie8,ff3,tt,maxthon,chrome,safari4.0,opera
因為子頁面較多，請**本案例打包檔案到本地測試：**demo
本文標題: 不用cookie的仿重新整理二級高亮選單
本文位址:
cookie共享於二級網域名稱
糾結了半天,終於搞定了cookie在主網域名稱下各個二級網域名稱可共享問題.對於任何web 前端技術,都可以對建立cookie並且可以修改同域下cookie的資料.乙個cookie是乙個k v的字串,同時可以傳遞一些屬性.cookie cookie new cookie key value cook...
MyBatis 二級快取 關聯重新整理實現
3 關聯快取重新整理實現 查詢sql select u.o.name org name from user u left join organization o on u.org id o.id where u.id userinfo queryuserinfo param userid strin...
基於二級網域名稱下Cookie共享的SSO
網上已經有很多基於二級網域名稱下cookie共享的sso的解決方案，對於原理大家可能都很了解，無非就是登入乙個系統，產生乙個令牌儲存到client端的cookie中，這個cookie是基於主網域名稱的，然後再登入其它二級網域名稱下的系統，就會直接讀取主網域名稱下的cookie中的令牌，不要重新登入，...