抄代码|jquery实现帝国cms当前导航高亮的实践演练

帝国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本身。成功了,就记下来备用,省得下次又费时费力去实践,毕竟,哥只是个代码搬运工,不是程序员啊。

代码搬运工

附:另外网上有这样一种jquery代码解决方案,但华哥没有去实践验证过。如下:

无需程序代码支持,只要一段JS代码就行了。

首先,先加载JQ文件,

然后,在页面调用以下JS代码即可:

<script>$(function(){$('a[href="'+window.location.pathname+window.location.search'"]').addClass("hover");})</script><style>a.hover{color:#0071BE; font-weight:bold}</style>

推荐给$('a 这个加一个你栏目外层的div的class如 $('.class a 这样能避免其他地方高亮!

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注