您好,欢迎来到菜鸟吧源码网-本站资源仅供学习与参考,禁止用于商业或违法行为!
  • 首 页
  • 下载APP
  • 公告:菜鸟吧APP于2024.9.15正式上线,请首页右上角进入下载,本站资源均来源于互联网及会员投稿发布,所有资源仅供学习参考研究使用,请勿商用或其它非法用途,商用请购买正版,否则产生一切后果由用户自行承担!谢谢!

     

    当前位置:主页 > 站长学堂 > zblog教程 >
    zblog让导航突出显示当前页链接条目
    时间:2019-10-11 14:36 作者:菜鸟哥 浏览:收藏 挑错 打印

    z-blog让导航突出显示当前页链接条目:


    我们的大致思路是这样的,首先用js给导航部分中当前链接项加个区分的ID,如<li id=“current”>首页</li>,然后再用CSS定义就完成了。


    setp1 :加入js(jQuery代码),如下

    原先功能简单的代码


    <script type=&quot;text/javascript">


    $(document).ready(function(){


    $("#menu ul>li").each(function() {  //我们假设导航部分的ID为menu,结构是<div id="menu"><ul><li>...


       if ($(this).find("a").attr("href")==document.URL){


       $(this).attr("id","current")  //给当前页的<li>加上id="current",如<li id="current">首页</li>


       }


    });


    });


    </script>

    haphic将这一代码做了完善,此代码只支持 Z-Blog 模板.


    haphic 完善后的代码


    <script type="text/javascript">


       $("#menu ul>li").each(function() {


           if ($(this).find("a").attr("href").toLowerCase() !== str00.toLowerCase()){


               if (document.URL.toLowerCase().indexOf($(this).find("a").attr("href").toLowerCase()) !== -1){


                   $(this).attr("id","current")


               }


           }else{


               if ($(this).find("a").attr("href").toLowerCase() == document.URL.toLowerCase()){


                   $(this).attr("id","current")


               }


           }


       });


    </script>

    setp2 :定义CSS样式

    #menu ul li#current {


    background-color:#fff;


    color:#0B1316;


    }


    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。
    如有侵犯您的版权,请给我们来信:cainiaovip8@qq.com,我们尽快处理。

    ZBlog发表文章区标签教程ZBlog发表文章区标签教程
    zblogphp为什么我修改了网页样式,没过几天又给我还原回来了?zblogphp为什么我修改了网页样式,没过
    zblogphp主题修改专用插件“主题编辑器”使用说明zblogphp主题修改专用插件“主题编辑器