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

2016-04-10cms教程
28

关键字描述:链接 当前 显示 导航 突出 " < .attr this 代码

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

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

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

    原先功能简单的代码

    <script type="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;
    
    }


  • The End

    相关推荐

    网站图片丢失或者获取失败时显示默认图片的办法
    当我们的网站时间久了难免会出现图片丢失或者误删,这样文章的图片就无法显示了,会让页面变的很难看。那么当网站图片丢失或者获取失败时如何显示我们设置的默认图片呢,或者默认多张图片随机显示呢。 方法一:当图片调用失败后,会用图片后面设置的默认图片...
    2022-10-24 cms教程
    71

    修改帝国CMS默认提示框样式为layui
    修改帝国CMS默认提示框样式为layui,修改文件:e/message/index.php link href="?=$public_r[newsurl]?hmb2019/css/layui.css" rel="stylesheet" type="text/css"div class="layui-container" div class="layui-card" style="width:400px;box-shadow: 1px 1px...
    2022-10-20 cms教程
    331

    WordPress上一篇、下一篇文章链接添加title属性的方法
    上一篇、下一篇文章代码: ?php previous_post_link(%link,) ??php next_post_link(%link,) ? 该代码解析出来的代码大概如下: a href= rel=external nofollow rel=external nofollow /aa href= rel=external nofollow rel=external nofollow /a 通过 get_pr...
    2017-08-03 cms教程
    358

    WordPress去除链接添加 Noopener Noreferrer 的教程
    WordPress目前在最近的版本中为所有需要新窗口打开的链接都自动添加了新的 noopener noreferrer 属性。noopener noreferrer 属性并不是新发布的标准,但 WordPress 4.7.4 版开始的编辑器默认都会添加该属性。新窗口打开超链接的属性 target=_blank 增加 rel=...
    2017-07-31 cms教程
    232

    dicuz搭建的论坛如何修改改后台地址?
    用discuz搭建的论坛,后台默认地址是 域名加 admin.php,很多站长怕网站被黑客攻击,一般黑客会扫描admin文件,然后破解管理员账户登录后台,所以想修改后台的地址。直接修改 admin.php 名并放到其他文件夹里,访问后台用修改过的路径虽然能访问,但是会出错...
    2017-07-08 cms教程
    364

    phpcms筛选功能(经典无错)---汇总网上各种版本!
    phpcms的筛选功能,网上有各种版本,但是多多少少都会有点问题,不是很完美,下面我总结网上各种版本,加上自己的研究,得出一个算是比较全的一个资料,既可以分页,也可以分栏目! 第一步:后台添加字段 添加字段: 后台--内容--内容相关设置--模型管理--文...
    2017-06-26 cms教程
    436