z-blog让导航突出显示当前页链接条目
互联网 发布时间:2009-06-06 15:43:18 作者:jb51
我要评论
关键字描述:链接 当前 显示 导航 突出 " < .attr this 代码
z-blog让导航突出显示当前页链接条目:
我们的大致思路是这样的,首先用js给导航部分中当前链接项加个区分的ID,如<li id=“current”>首页</li>,然后再用CSS定义就完成了
关键字描述:链接 当前 显示 导航 突出 " < .attr this 代码
setp1 :加入js(jQuery代码),如下
setp2 :定义CSS样式
z-blog让导航突出显示当前页链接条目:
我们的大致思路是这样的,首先用js给导航部分中当前链接项加个区分的ID,如<li id=“current”>首页</li>,然后再用CSS定义就完成了。
原先功能简单的代码
<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>
#menu ul li#current {
background-color:#fff;
color:#0B1316;
}
相关文章
- 这篇文章主要介绍了Nginx的Z-Blog的伪静态配置方法,需要的朋友可以参考下2014-12-07
- 这篇文章主要介绍了Z-Blog 使用Tmt主题时修改底部版权的方法,需要的朋友可以参考下2014-12-07
- zblog2.2的技巧下文分享给大家2014-09-29
- 如果不修改默认后台地址总会感觉安全性靠不住。出于这个考虑,我今天也一直在想办法修改默认的后台地址2014-05-21
- 很多朋友刚建立博客的时候都是采用国内优秀的博客系统:Z-BLOG,用一段时间过后很多人都想转移到wordpress,各种转移原因很多。学朋的主要原因就是Z-BLOG官方长时间不对博客2012-09-15
- 有关z-blog插件的制作过程步骤,在搜索引擎里至今没有发现一篇详细的教程,官方也没有给出一个详细的实例,所以不少跃跃欲试的朋友,却找不到方向,甚为苦恼2012-03-04
- 前段日子,这个博客的文章浏览数和评论数频繁出现问题,有很多时候是显示不出数据,除此外,就是显示的数据一团糟2012-03-04
- zblog有个自动生成文章摘要的功能,这给我们在发表文章的时候提供了一些方便,节省了要手动添加文章摘要的时间,这个功能很好2012-03-04
- 今天狠狠的给这个博客动了一次大手术,那就是所有目录静态化,包括博客首页静态化,归档首页静态化2012-03-04
- 有个功能有些站长会喜欢,那就是文章发布的默认浏览数2012-03-04


最新评论