選單高亮效果是每個網頁經常採用的設計方式，它能有效地讓使用者知道自己目前所在的欄位。這也是我常採用的方式，一般的網頁至少都有兩個選單，第一個是頂部的總導航條選單，另一個是左側的分類導覽選單。一般要求在一級選單高亮下二級選單也能記錄目前狀態。
對於一個包含頂部選單的頁頭區域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純CSS或JS方式可以很容易地實現，但今天我要談的不是這種，今天說的是一級選單和二級選單在每個頁面中都是動態載入的，也就是它們是作為使用者控制的方式載入的。這種情況下要記錄選單的高亮狀態是一件比較困難的事。
當然，你可能會說，用cookie可以記錄每個頁面加載時上次記錄的高亮狀態，是的，它確實可以記錄，但是這種方式在一些複雜的包含許多子頁面的應用中，會給用戶造成許多困擾和麻煩。例如在cookie生存週期內，重新開啟這個專案時，此時cookie的生存週期還沒有完全結束，它還記錄著上次儲存的狀態，而這時頁面位址已經發生了變化，那麼當前高亮的選單所指向的並不是使用者所希望看到的頁面。實踐證明，這個cookie的生存週期無論你設定多長都無法完美解決使用者惡意刷新頁面的狀況。這確實是一件糟糕的事！
那麼有沒有較好的方法來解決這種狀況呢？
答案是有的。我們知道要解決這個問題，最理想的方法是在每個頁面載入時，根據頁面的url地址明確地設定當前選單的高亮樣式。這能完美地解決此類問題，並且這種方式無論用戶如何惡意點擊刷新按鈕，高亮狀態依舊保持不變。 知道了原理，要實現就容易多了。
結構層
一級菜單結構層：
<ul id="menu">
<li><a href="default.html">首頁</a></li>
<li><a href="clothing.html">服裝用品</a></li>
<li><a href="house.html">家居用品</a></li>
<li><a href="cosmetic.html">化妝用品</a></li>
</ul>
可以看到在這個一級選單中，其連結位址一般是沒有參數值的。 二級菜單的結構層：
<ul id="othermenu">
<li><a href="house.html?pId=2&sId=1">日常用品</a></li>
<li><a href="house.html?pId=2&sId=2">小型家具</a></li>
<li><a href="house.html?pId=2&sId=3">電器配件</a></li>
<li><a href="house.html?pId=2&sId=4">床品套件</a></li>
<li><a href="house.html?pId=2&sId=5">婚慶床品</a></li>
<li><a href="house.html?pId=2&sId=6">兒童床品</a></li>
<li><a href="house.html?pId=2&sId=7">工藝擺設</a></li>
<li><a href="house.html?pId=2&sId=8">清潔工具</a></li>
<li><a href="house.html?pId=2&sId=9">居家清潔</a></li>
</ul>
與一級選單不同的是，我們將二級選單中的連結位址加入兩個參數值，pId參數指向的是頂部一級選單的的序號，而sId則是選單自己的順序號。我們將這兩個選單的總容器ul都設定了兩個不同中的ID，它們需要在JS中調用，所以千萬不能少。
樣式層
關於樣式，其實都沒有什麼特別的地方，你可以隨心所欲地設定成你想要的樣式，只是需要注意的地方是，我們需要單獨設定選單高亮的三種狀態樣式，以供JS動態調用。
/*一級選單的三種樣式設定*/
#menu li a.normal{background:#fff;}//普通樣式
#menu li a.over{background:#00ff00;} //翻滾樣式
#menu li a.cur{background:#ff0000;color:#fff;} //高亮樣式
/*二級選單的三種樣式設定*/
#othermenu li a.normal{background:#fff;} //普通樣式
#othermenu li a.over{background:#AA7F00;color:#fff;} //翻滾樣式
#othermenu li a.cur{background:#7F0000;color:#fff;} //高亮樣式