导航高亮完整代码教程

很多人对网站顶部的导航有当前页面高亮显示的需求，下面就分享一下导航高亮的具体教程：

导航高亮要实现的效果：

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的上一级（视情况而定），添加判断即可，如下图：