导航高亮完整代码教程
很多人对网站顶部的导航有当前页面高亮显示的需求,下面就分享一下导航高亮的具体教程:
导航高亮要实现的效果:
1、位于首页时候,导航上的首页按钮高亮;
2、位于分类页时候,导航上的对应的分类按钮高亮;
3、位于分类页并且含有父分类的时候,导航上对应的分类及其分类对应的父分类按钮高亮;
4、位于文章页时候,导航上该文章对应的分类按钮高亮;
5、位于文章页并且该文章有父分类的时候,导航栏上对应文章的分类及其父分类高亮;
6、位于单页面时候,导航上对应的单页按钮高亮;
7、位于标签页时候,导航上对应的标签按钮高亮。
JS代码:
jQuery(document).ready(function($){ var datatype=$(".navbar-collapse").attr("data-type");//这个navbar-collapse是判断data-type、data-infoid、data-rootid这三个东西的class名 $("#menu-menu li ").each(function(){//这个#menu-menu li为导航所在的位置 try{ var myid=$(this).attr("id"); if("index"==datatype){ if(myid=="navbar-item-index"){ $("#navbar-item-index").addClass("active"); } }else if("category"==datatype){ var infoid=$(".navbar-collapse").attr("data-infoid");//这个同上,下面的也一样。 if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $("#navbar-category-"+b[i]+"").addClass("active"); } } } var crootid=$(".navbar-collapse").attr("data-rootid"); if(crootid!=null){ var ccateid = $(".navbar-collapse").attr("data-rootid"); $("#menu-menu li").each(function(){ $("#navbar-category-"+ccateid).addClass("active"); }); } }else if("article"==datatype){ var infoid=$(".navbar-collapse").attr("data-infoid"); if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $(this).addClass("active"); } } } var arootid=$(".navbar-collapse").attr("data-rootid"); if(arootid!=null){ var cateid = $(".navbar-collapse").attr("data-rootid"); $("#menu-menu li").each(function(){ $("#navbar-category-"+cateid).addClass("active"); }); } }else if("page"==datatype){ var infoid=$(".navbar-collapse").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-page-"+infoid){ $("#navbar-page-"+infoid+"").addClass("active"); } } }else if("tag"==datatype){ var infoid=$(".navbar-collapse").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-tag-"+infoid){ $("#navbar-tag-"+infoid+"").addClass("active"); } } } }catch(E){} }); });
在导航上,不同页面都有不同的id命名规则,请看:
首页的li标签中id固定为:navbar-item-index
分类页的li标签中id固定为:navbar-category-8(这个8是当前这个分类的ID,不同分类ID不同)
单页的li标签中id固定为:navbar-page-18(这个18是当前这个单页的ID,不同单页ID不同)
标签的li标签中id固定为:navbar-tag-1(这个1的当前这个标签的ID,不同标签ID不同)
下面以分类页为例(如下图):
1、当前所处的分类是【建站风格】,这个分类ID是1,所以在id命名规则上面来看,这个id就是navbar-category-8(本站缩写成 navcate-1),所以data-infoid的值等于1,data-rootid对应的是其父分类,这个分类没有父分类,所以没有值,这些地方都是对应起来的。
2、js代码中找到该链接,添加名为“active”的class类
含有子分类和父分类的例子(如下图):
1、当前所处的分类是【网站优化】,这个分类ID是5,对应的ID命名为navbar-category-5(本站缩写成 navcate-5),所以对应的data-infoid的值等于5,data-rootid对应的是其父分类,父分类是【建站资讯】,id为7,这些地方都是对应起来的。
2、js代码中找到该链接,添加名为“active”的class,因为这个链接(分类)是存在父分类的,所以父分类也添加名为“active”的class类。
模板里需要对data-type、data-infoid、data-rootid进行判断,代码如下:
{if $type=='article'} data-type="article" data-infoid="{$article.Category.ID}" data-rootid="{if $article.Category.RootID}{$article.Category.RootID}{/if}" {elseif $type=='category'} data-type="category" data-infoid="{$category.ID}" data-rootid="{if $category.RootID}{$category.RootID}{/if}" {elseif $type=='page'} data-type="page" data-infoid="{$article.ID}" {elseif $type=='tag'} data-type="tag" data-infoid="{$tag.ID}" {elseif $type=='index'} data-type="index" data-infoid="" {else} data-type="other" data-infoid="" {/if}>
以上代码在模板的导航上适当位置,一般是导航ul的上一级(视情况而定),添加判断即可,如下图: