JS点击导航菜单选中效果

场景：

很多网站都是用后端接口引用模板文件的方式，而模板文件会设置一个公共头文件，所有子页面都会引用公共头文件，然后在头文件写导航条，子页面就不需要写导航条了，但这样就不太方便做点击菜单选中效果，本文案例就是针对这一情况做的优化案例。

原理：

主要用js和cookie实现，首先给导航条标签li做一个点击事件，触发点击事件后，获取当前元素（li标签）的分类名称，并保存到cookie里面，然后载入页面的时候获取导航条里的所有li标签，逐一判断li标签的分类名称是否与cookie里面的相等，相等就修改该li标签的css高亮显示。

优点：

一般的做法是在后端接口设置一个标识，标识是哪个页面的接口，然后在模板文件里做判断，这样的做法麻烦在可能需要在多个接口设置不同标识，当然也可以用url地址作为标识，但是这样可移植性不高，因为需要在模板文件做具体的判断。而本文案例只需要在头文件加入代码就可以实现，前后端完全分离，尽量少占用服务器资源，页面加载速度更快，可移植性高。

代码：

  <ul class="menuLink">     <li><a href="{:U('Index/index')}" class="current">首页</a></li>     <li><a href="{:U('Goods/goodsList')}">叉车租赁</a>       <ul>            <li><a href="{:U('Goods/goodsList')}">年月租</a></li>            <li><a href="{:U('Goods/goodsTemp')}">临时租</a></li>       </ul>     </li>     <li><a href="{:U('Special/index')}">好运商城</a>        <ul>            <li><a href="{:U('Special/index')}">特价车</a></li>            <!-- <li><a href="{:U('MallShop/Industry')}">工业品</a></li> -->        </ul>     </li>     <li> <a href="{:U('News/articleList',array('cat_id'=>$art_cat[0]['cat_id']))}">资讯中心</a>       <ul>            <foreach item='art_cat' name='art_cat'>              <li><a href="{:U('News/articleList',array('cat_id'=>$art_cat['cat_id']))}">{$art_cat.cat_name}</a></li>            </foreach>            <li><a href="{:U('News/news1')}">租赁问答</a></li>       </ul>     </li>     <li><a href="{:U('service/service')}">服务网络</a></li>     <li><a href="{:U('service/join')}">加盟合作</a></li>     <li class="last"><a href="{:U('News/about',array('cat_id'=>$about_cat[0]['cat_id']))}">关于我们</a>       <ul>          <foreach item='about_cat' name='about_cat'>            <li><a href="{:U('News/about',array('cat_id'=>$about_cat['cat_id']))}">{$about_cat.cat_name}</a></li>          </foreach>          <li><a href="{:U('News/download')}">下载专区</a></li>       </ul>     </li>    </ul><script src="/Public/hyw/js/jquery1.8.3.min.js"></script>   <script type="text/javascript">//获取cookie中保存的导航分类名称var menu_name_cookie = getcookie('menu_name_cookie');$('.menuLink>li').each(function(key,val){//获取li里的a标签的导航分类名称var menu_name_li = $(val).children('a').html();if(menu_name_li == menu_name_cookie){//清除默认选中$('.menuLink>li>a').attr({'class':''});//选中符合条件的li$(val).children('a').attr({'class':'current'});return false;}})//点击导航li时用cookie存储所点击的导航分类名称$('.menuLink>li').click(function(){var menu_name_cookie = $(this).children('a').html();document.cookie="menu_name_cookie="+menu_name_cookie+";path=/";})//获取指定名称的cookie的值function getcookie(objname){var arrstr = document.cookie.split("; ");for(var i = 0;i < arrstr.length;i ++){var temp = arrstr[i].split("=");if(temp[0] == objname) return unescape(temp[1]);}}</script>