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