抄代码的搬运工｜jquery实现帝国cms当前导航高亮的实践演练

想要实现帝国cms的当前导航高亮功能（注：导航的html结构不是用灵动标签调用的栏目名称动态提取的，而是写死的），结果大费周章，抄了五六段jquery代码后都没有搞定，哥几乎要哭了。

好在最后终于实现了帝国cms当前导航的高亮效果。如下：

如果没有成功，并不是网上的jquery代码有问题，而是没有套对套准。要想成功，需要html结构、css样式和jquey代码三者都耦合到位才成。

放在页面头部模板的导航html结构：

<div class="nav" ><div class="clearfix content_gy"><div class="left"> <img src="/skin/custom/images/logo_pic.png" alt="抄代码的搬运工｜jquery实现帝国cms当前导航高亮的实践演练" alt=""/> </div><div class="right"><p class="clearfix top"> <span class="span1">全国免费咨询电话：</span> <span class="span2">137-1842-6927</span> </p><ul class="right_ul clearfix"> <li ><a href="/index.html" rel="/index.html"><span class="span1">首页</span><span class="span2">Home</span></a></li><li><a href="/case/" rel="/case/"><span class="span1">品牌案例</span><span class="span2">Case</span></a></li><li><a href="/about.html" rel="/about.html"><span class="span1">匠心筑龙</span><span class="span2">Zhu long</span></a></li><li><a href="/flow.html" rel="/flow.html"><span class="span1">服务流程</span><span class="span2">Flow</span></a></li><li><a href="/news/" rel="/news/"><span class="span1">新闻动态</span><span class="span2">News</span></a></li><li><a href="/contact.html" rel="/contact.html"><span class="span1">联系我们</span><span class="span2">Contact US</span></a></li></ul></div></div></div>

对应的css:

.nav .right ul li a.active span{color: #d26400;}

底部模板的jquery代码：

<script type="text/javascript">var urlstr = location.href;var urlstatus=false;$(".nav a").each(function () {if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {$(this).addClass('active'); urlstatus = true;} else {$(this).removeClass('active');}});if (!urlstatus) {$(".nav a").eq(0).addClass('active'); }</script>

代码的大体意思是通过当前url网址来进行判断，为当前点击的菜单增加.active样式，其他的则移除掉。其他情况则为首页加上.active样式。

太多的原理说不清楚，经过实践并成功的jquery实现帝国cms当前导航高亮，发现要注意以下几点。

1.a标签的链接代码，最开始抄的代码最为简单明了，可是最终比对发现a的链接是假链接，即:href=javascript:;而自己实现的导航a是链接到不同页面的；

2.class=”active”的位置，开始是放在上一层，即：<li class=”active”>,没有测试成功(网上很多jquery实现高亮的代码是作用在li标签上，可惜没有抄成功)。后来参考别的代码，重新把active放在a标签上。

3.active放在a标签上后，对应的css也要调整，以免css失效。

4.jquery代码照抄就好，不会错，标红的“nav a”（两处）则匹配导航html结构，不容有误，另外根据代码，为导航的a标签添加了rel属性。

测试过程中可以通过浏览器的开发者工具观察查看，发现一些问题所在。

以上jquery代码实现帝国cms当前导航的高亮效果，实质上这是一种可以通用的效果，并不限制于cms本身。成功了，就记下来备用，省得下次又费时费力去实践，毕竟，哥只是个代码搬运工，不是程序员啊。