欢迎访问,本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

分享个zbp导航高亮js代码,希望对大家有所帮助

雨夜 5415次浏览 13个评论

具体使用方法,大家要结合自己网站导航条代码和js代码一起看才能使用良好。

效果如本站tblog5主题效果:

  1. 首页首页高亮

  2. 分类页等高亮该分类的导航链接按钮,如果该分类有顶级分类,则高亮该顶级分类链接按钮。

  3. 文章页高亮该文章的导航分类链接按钮。如果该分类有顶级分类,则高亮该顶级分类链接按钮。

  4. 页面页高亮该页面的页面链接按钮。

代码如下:

//导航高亮
jQuery(document).ready(function($){ 
var datatype=$(".header-nav").attr("data-type");
	$(".nav-menu>li ").each(function(){
		try{
			var myid=$(this).attr("id");
			if("index"==datatype){
				if(myid=="nvabar-item-index"){
					$("#nvabar-item-index a:first-child").addClass("current-menu-item");
				}
			}else if("category"==datatype){
				var infoid=$(".header-nav").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]+" a:first-child").addClass("current-menu-item");
						}
					}
				}
			}else if("article"==datatype){
				var infoid=$(".header-nav").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]+" a:first-child").addClass("current-menu-item");
						}
					}
				}
			}else if("page"==datatype){
				var infoid=$(".header-nav").attr("data-infoid");
				if(infoid!=null){
					if(myid=="navbar-page-"+infoid){
						$("#navbar-page-"+infoid+" a:first-child").addClass("current-menu-item");
					}
				}
			}else if("tag"==datatype){
				var infoid=$(".header-nav").attr("data-infoid");
				if(infoid!=null){
					if(myid=="navbar-tag-"+infoid){
						$("#navbar-tag-"+infoid+" a:first-child").addClass("current-menu-item");
					}
				}
			}
		}catch(E){}
	});
});

以分类页为例:导航部分代码:

(1)分类19的命名和上述代码的16行对应,在模板页data-type data-infoid=“19”和19对应.

(2)js代码找到该链接地址并加上类“current-menu-item”(如果是上级分类,则把所有子分类都加上该类)。

(3)模块管理的各个链接一定要和该代码里的规定对应,不然不会出效果。

(4)如果想更漂亮,则需要css的配合了。

(4)该代码是iasuna提供的代码,我做了个小修改,加入了文章页的高亮效果。


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13) 个小伙伴在吐槽
  1. “如果该分类有顶级分类,则高亮该顶级分类链接按钮” 先谢谢分享提供的代码。我使用不知那里设置有误,比如我现在点击的id链接是 4 , 按理说是顶级分类 data-infoid="1 " 才对的,不知为什么 data-infoid="4 " 是我那里没有设置好吗?
    咸鱼 2017-03-13 PM 02:51 回复
    • 用php去判断下如果是子分类就显示主分类的ID就可以了。
      涂涂研版 2017-03-13 PM 07:19 回复
  2. 有二级导航的,怎么让父导航也高亮啊?
    夜凝 2016-05-13 AM 09:37 回复
    • 当然可以。
      涂涂研版 2016-05-13 PM 08:53 回复
  3. data-type=""
    data-infoid=“”
    怎么获取内容啊?就差这一步了;
    李洋博客 2015-12-22 PM 03:49 回复
    • 自己去看tblog5,里面有。主题免费了。
      涂涂研版 2015-12-22 PM 08:01 回复
  4. 嗯,这个不错,收藏待用,zblog官方介绍的方法不能在文章页高亮所在分类
    Lopwon 2015-04-17 PM 11:00 回复
  5. 使用了,不会用,呵。
    老张 2015-03-28 PM 09:37 回复
    • 仔细看就知道怎么做了。
      雨夜涂涂 2015-03-28 PM 09:59 回复
  6. 内容不错,感谢博主分享
    广东淋浴房 2014-11-27 PM 05:42 回复
    • 哦。。
      雨夜 2014-11-28 PM 11:22 回复
  7. 试试 我现在用的只有列表页和首页有效 内容页无效
    天兴工作室 2014-11-26 PM 08:13 回复
    • 恩,祝你成功。
      雨夜 2014-11-26 PM 10:55 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们