浅谈不用Cookie实现高亮Javascript菜单效果

xwpxcom

笔者经常采用的高亮Javascript菜单效果设计方式，一般的网页至少都有两级菜单，第一个是顶部的总导航条菜单，另一个是左侧的分类导航菜单。一般要求在一级菜单高亮下二级菜单也能记录当前状态。

对于一个包含顶部菜单的页头区域如果固定不变的，也就是它不用每次都重新加载，这种情况下用纯CSS或JS方式可以很容易地实现，但今天我要谈的不是这种，今天说的是一级菜单和二级菜单在每个页面中都是动态加载的，也就是它们是作为用户控件的方式载入的。这种情况下要想高亮Javascript菜单效果的状态是一件比较困难的事情。

当然，你可能会说，用cookie可以记录每个页面加载时上次记录的高亮状态，是的，它确实可以记录，但是这种方式在一些复杂的包含许多子页面的应用中，会给用户造成许多困扰和麻烦。比如在cookie生存周期内，重新打开这个项目时，此时cookie的生存周期还没有完全结束，它还记录着上次保存的状态，而这时页面地址已经发生了变化，那么当前高亮的菜单所指向的就不是用户所希望看到的页面。实践证明，这个cookie的生存周期无论你设置多长都不能完美解决用户恶意刷新页面的状况。这确实是一件糟糕的事情！

那么有没有一种较好的办法来解决这种状况呢？

答案是有的。我们知道要解决这个问题，最理想的办法是在每个页面加载时，根据页面的url地址显式地设置当前菜单的高亮样式。这能完美地解决此类问题，并且这种方式无论用户如何恶意点击刷新按钮，高亮状态依旧保持不变。 知道了原理，要实现起来就容易多了。

【结构层】

一级菜单结构层：
<div class="blockcode">

• <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>