ZBLOG简单又通用导航菜单高亮代码
没太多要说明的,直接上代码:
<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}
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
仍然有问题? 我们要如何帮助您?