ZBLOG简单又通用导航菜单高亮代码
分类:zblog教程
39
没太多要说明的,直接上代码:
<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} 最新发布
-
zblog响应式自媒体博客主题63号
2026-04-08 -
zblog响应式资讯门户主题62号
2026-04-05 -
zblog响应式文章自媒体资讯主题61号
2026-04-01 -
zblog响应式自媒体资讯主题60号
2026-03-30 -
zblog响应式门户文章资讯主题59号
2026-03-29
热门文章
-
ZBLOG精品手赚APP应用下载主题19号
1225 -
zblog响应式机器设备企业主题10号
1220 -
zblog响应式生活分类信息主题2号
939 -
zblog响应式机械企业外贸主题6号
321 -
简洁大气zblog响应式文章主题52号
307