【适合有一定动手能力的朋友】

原文章:http://www.tusay.net/post/205.html

至于导航高亮是什么就不多说了,一直来有人反馈说涂涂那个导航高亮教程不完整,而且在含有子分类和父分类时候判断上有点问题,在这里我将详细的说一下这个导航高亮,以及解决含有子分类和父分类时候的判断问题。

导航高亮的效果应该是:

1、位于首页时候,导航上的首页按钮高亮;

2、位于分类页时候,导航上的对应的分类按钮高亮;

3、位于分类页并且含有父分类的时候,导航上对应的分类及其分类对应的父分类按钮高亮;

4、位于文章页时候,导航上该文章对应的分类按钮高亮;

5、位于文章页并且该文章有父分类的时候,导航栏上对应文章的分类及其父分类高亮;

6、位于单页面时候,导航上对应的单页按钮高亮;

7、位于标签页时候,导航上对应的标签按钮高亮;

在涂涂那个教程中,经过测试后发现,3、5都会出现问题,或者说不符合逻辑,例如A分类下有B和C两个子分类,我当前位于B分类下面,正常来说要么B分类高亮,要么B分类跟A分类高亮,C分类高亮啥呢。。

先来看看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不同)

了解完各个不同页面的ID命名规则后,下面以分类页做例子,看下面图片:

zblogphp导航高亮完整修复改进版 ZBlog教程 第1张

1、当前所处的分类是GoodLuck,这个分类ID是8,所以在id命名规则上面来看,这个id就是navbar-category-8,所以data-infoid的值等于8,data-rootid对应的是其父分类,这个分类没有父分类,所以没有值,这些地方都是对应起来的。

2、js代码中找到该链接,添加名为“active”的class

再看看含有子分类和父分类的例子:

zblogphp导航高亮完整修复改进版 ZBlog教程 第2张

1、当前所处的分类是爱情语录,这个分类ID是24,对应的ID命名为navbar-category-24,所以对应的data-infoid的值等于24,data-rootid对应的是其父分类,父分类是英语美文,id为27,这些地方都是对应起来的。

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的上一级(视情况而定),添加判断即可,可以查看下面例子:

zblogphp导航高亮完整修复改进版 ZBlog教程 第3张

好了,已经非常详细的讲解了导航高亮,以及上述代码中解决了含有子分类和父分类时候的判断问题。

但其实标签还可以进一步判断的,但一般来说很少有把单个或几个标签丢导航去的吧?所以懒,懒得加了。。

PS:主要是导航高亮很多朋友都想要,但是在设置上对于一些小白朋友又不懂,所以也就借此机会详细的说一下,以后主题如果带有导航高亮的话,设置方面直接导这里来即可。。

最后,看着有点繁琐,其实不然,慢慢看吧,有问题可以下方留言。