手工SEO

手工SEO首页 帝国教程 正文

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

手工SEO 2020-05-12 02:02:13 帝国教程 183℃ 手工SEO

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


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


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


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


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


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


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


<div ><div><div> <img src="/skin/custom/images/logo_pic.png" alt=""/> </div><div><p> <span>全国免费咨询电话:</span> <span>137-1842-6927</span> </p><ul> <li ><a href="/index.html"><span>首页</span><span>Home</span></a></li><li><a href="/case/"><span>品牌案例</span><span>Case</span></a></li><li><a href="/about.html"><span>匠心筑龙</span><span>Zhu long</span></a></li><li><a href="/flow.html"><span>服务流程</span><span>Flow</span></a></li><li><a href="/news/"><span>新闻动态</span><span>News</span></a></li><li><a href="/contact.html"><span>联系我们</span><span>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 + 'http://www.vipshan.com/').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实现帝国cms当前导航高亮的实践演练

上一篇:帝国cms+jquery.lazyload.js实现图片延迟懒加载极简方法

下一篇:帝国cms后台之解析上传图片

网站分类
标签列表