不用Cookie的仿刷新二級高亮菜單

2024-07-11 08:45:07

字體：大中小

來源：轉載

供稿：網友

這也是我經常采用的方式，一般的網頁至少都有兩級菜單，第一個是頂部的總導航條菜單，另一個是左側的分類導航菜單。一般要求在一級菜單高亮下二級菜單也能記錄當前狀態。
對于一個包含頂部菜單的頁頭區域如果固定不變的，也就是它不用每次都重新加載，這種情況下用純CSS或JS方式可以很容易地實現，但今天我要談的不是這種，今天說的是一級菜單和二級菜單在每個頁面中都是動態加載的，也就是它們是作為用戶控件的方式載入的。這種情況下要想記錄菜單的高亮狀態是一件比較困難的事情。
當然，你可能會說，用cookie可以記錄每個頁面加載時上次記錄的高亮狀態，是的，它確實可以記錄，但是這種方式在一些復雜的包含許多子頁面的應用中，會給用戶造成許多困擾和麻煩。比如在cookie生存周期內，重新打開這個項目時，此時cookie的生存周期還沒有完全結束，它還記錄著上次保存的狀態，而這時頁面地址已經發生了變化，那么當前高亮的菜單所指向的就不是用戶所希望看到的頁面。實踐證明，這個cookie的生存周期無論你設置多長都不能完美解決用戶惡意刷新頁面的狀況。這確實是一件糟糕的事情！
那么有沒有一種較好的辦法來解決這種狀況呢？
答案是有的。我們知道要解決這個問題，最理想的辦法是在每個頁面加載時，根據頁面的url地址顯式地設置當前菜單的高亮樣式。這能完美地解決此類問題，并且這種方式無論用戶如何惡意點擊刷新按鈕，高亮狀態依舊保持不變。知道了原理，要實現起來就容易多了。
結構層
一級菜單結構層：

復制代碼

上一篇：vertical-align 表單元素垂直對齊的解決方法

下一篇：CSS3 優勢以及網頁設計師如何使用CSS3技術