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>