首页 未命名内容详情

ZBLOG简单又通用导航菜单高亮代码

2026-01-10 3 897698882
ZBLOG简单又通用导航菜单高亮代码

站点名称:ZBLOG简单又通用导航菜单高亮代码

所属分类:未命名

官方网址:

SEO查询: 爱站网 站长工具

进入网站

站点介绍

没太多要说明的,直接上代码:

   <div class="menu" id="nav">        <ul class="navbar">		 {module:navbar}        </ul>    </div>

和上面演示代码一样:id="nav" 加在对应的<div 上就可以了!

然后把下面的代码,加在你的JS文件里就行了!

$(function(){	var nav = $('#nav');	var navItem = nav.find('li');	navItem.each(function(){		var _href = $(this).children('a').attr('href');		if(_href == _url){			if($(this).parents('li').length > 0){				$(this).parents('li').addClass('active');			}else{				$(this).addClass('active');			}					}		if($(this).children('ul').length > 0){			$(this).addClass('hasSub').children('a').after('<em></em>');		}	});});

以上代码中:active 是所加的CSS样式,CSS 样式代码,大家就自己写吧!

特别说明:

如果是没有用 li 标签:

  <div class="menu" >        <nav class="navbar">		<a href="category-4.html" >首页</a>		<a href="category-4.html" >手游</a>		<a href="category-4.html" >攻略</a>        </nav>    </div>

就要改用下面的代码了。

$(function (){	$(".navbar a").each(function() {		if ($(this)[0].href == String(_url)) {			$(this).addClass("active");		}	});

最后就是在</body>前加上以下代码,也可以加在最网页结尾,不过建议还是加在</footer>下面!

{if $type == 'index'}<script>	var _url = '{$host}';</script>{elseif $type == 'category'}<script>	var _url = '{$categorys[$category->ID].Url}';</script>{elseif $type == 'page'}<script>	var _url = '{$article->Url}';</script>{elseif $type == 'article'}<script>	var _url = '{$categorys[$article->Category->ID].Url}';</script>{else}<script>	var _url = window.location.href;</script>{/if}