bootstrap左侧导航弹出菜单
抄代码的搬运工｜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=""/> </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本身。成功了，就记下来备用，省得下次又费时费力去实践，毕竟，哥只是个代码搬运工，不是程序员啊。
帝国cms导航当前页面高亮实现另类方法：灵动标签＋php逻辑非
关于帝国cms制作的网站，当前页面导航高亮的实现方法，在华哥过去的这篇博文中（见：jquery实现帝国cms当前导航高亮的实践演练）已经有了成功实践。不过最近又碰到这个技术性问题，由于html代码结构不一样，采用的是另一种解决方法。
方法共分两步。
第一步，用灵动标签调用出与后台栏目相对应的导航。
[e:loop={“select classid,classname from {$dbtbpre}enewsclass where bclassid=0 and showclass=0 order by myorder,classid asc”,0,24,0}]
<?php
$classurl=sys_ReturnBqClassname($bqr,9);//取得栏目地址
$bgcolor=””;
if($GLOBALS[navclassid])
{
$fcr=explode(‘|’,$class_r[$GLOBALS[navclassid]][featherclass]);
$topbclassid=$fcr[1]?$fcr[1]:$GLOBALS[navclassid];//取得当前栏目的一级栏目ID
if($bqr[classid]==$topbclassid)
{
$bgcolor=”active”;
}
}
?>
<a href=”<?=$classurl?>” class=”<?=$bgcolor?>”>
<?=$bqr[classname]?>
</a> [/e:loop]
效果如图：
注意代码中的$bgcolor变量，就是它在发挥当前页面高亮的作用。
第二步，处理首页。如果当前页面是首页，那么首页高亮，导航中的其它则不高亮。
可是有个问题，首页并不在后台的栏目设置中，因此，上面灵动标签的代码不能对首页施加作用，需另外做进一步处理。
参考了这篇文章：帝国cms小技巧之 判断对应页面 给栏目高亮；
不过，在实践中，发现$classid是个空值，至少在首页中经测试它是个空值。我用的版本是帝国cms7.5。
又参考了这篇文章：帝国CMS利用PHP判断当前页面是否为首页
这个不太好实践，但是提供了思路：就是要想方设法，来判断当前页是否为首页。
另外那个“非首页”中的非字，让我想起了逻辑非的判断，于是查找php语法，尝试用逻辑非来解决。
代码是这样： <a href=”/” <? if (!$GLOBALS[navclassid]){echo ” class=’active'”;} ?>>首页</a>
php中的逻辑非就是一个!符号，这样一试，发现，竟然成了。
不过要注意，这第二段代码可是放在第一段前的?
本人非程序员，也不是天天研究帝国cms。不过经过这些年的折腾和实践（从7.0至7.5），用帝国cms建设网站的技术也日益增长至娴熟阶段，没有什么搞不定的，甚至可以为师教学，带着学员快速提升。最后赞一句帝国cms7.5，个人感觉真是好极了，安全、稳定、快速。