SEO技术博客帝国教程↬jquery实现帝国cms当前导航高亮的实践演练

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

华言巧语2020-05-11 22:32【帝国教程】快速评论


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



- END -

浏览完了?你可以点我去评论留下观点!

评论

    不发表一下观点,这个评论功能拿来做什么?
    • 全部评论(0
      还没有评论,快来抢沙发吧!