类似这种的目录,根据文章中的H标签来自动生成

js代码如下 需要引入jquery库

  1. $(".post-content").find("h1,h2,h3,h4,h5,h6").each(function(i,item){  
  2.   var tag = $(item).get(0).nodeName.toLowerCase();  
  3.   $(item).attr("id","h"+i);  
  4.   $(".docs-menu").append('<li><a class="title-'+tag+' sidebar-link" href="#h'+i+'">'+$(this).text()+'</a></li>');  
  5.   $(".title-h1");  
  6.   $(".title-h2");  
  7.   $(".title-h3");  
  8.   $(".title-h4");  
  9. });  
  10. $(".sidebar-link").click(function(){  
  11.   $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 600);  
  12. })  

效果如图:

  就很棒!
hh

请先登录

Or

发表评论

还没有任何评论,你来说两句吧



相关文章

WordPress 仪表盘欢迎面版加入百度统计数据展示模块

WordPress 仪表盘欢迎面版加入百度统计数据展示模块

百度站长统计仍然是国内主流的网站统计。很多站长每天看自己的网站数据,看自己的流量趋势、访客路线、网站热门关键词、网站热门页面等。最常…


WordPress自定义robots协议让搜索引擎抓取网站指定内容

WordPress自定义robots协议让搜索引擎抓取网站指定内容

大家做网站难免有些时候不想让某些搜索引擎抓取某些页面,当然可以在根目录下放robots.txt文件屏蔽搜索引擎或者设置搜索引擎可以抓…


正确配置 WordPress 邮件SMTP

正确配置 WordPress 邮件SMTP

默认情况下大部分主机空间都无法正常发送邮件(mail()函数未启用),造成用户注册时不能发送邮件、无法找回密码等,因此需要借用第三方…


WordPress建网站前期交了钱为什么第二年还要另外收钱续费?

WordPress建网站前期交了钱为什么第二年还要另外收钱续费?

WordPress建网站前期交了钱为什么第二年还要另外收钱续费? 首先,可以肯定的是,所有的企业网站都需要更新。为什么要续费?我们先…


WordPress禁用Emoji表情提高网站加载速度

WordPress禁用Emoji表情提高网站加载速度

WordPress Emoji 的实现方式会调用 http://s.w.org/images/core/emoji/72×72/ 下…


简化/屏蔽WordPress后台无用项让后台更简洁

简化/屏蔽WordPress后台无用项让后台更简洁

WordPress的功能十分强大且强悍,但有些功能以及模块我们平时是用不着的,所以今天分享一下如何将某个用不着的功能模块屏蔽掉。 根…


这款WordPress主题的SEO功能是真骚!且强大!HaoSao主题

这款WordPress主题的SEO功能是真骚!且强大!HaoSao主题

WordPress这个网站程序应该是世界上被广泛使用最多的CMS系统了,它不仅开源、免费、功能强大、并且是比较SEO友好的,所以越来…


WordPress网站固定链接设置

WordPress网站固定链接设置

安装好wordpress之后,默认的固定链接是 https://www.xxxxxx.com/?p=123 类型的。 如何更改设置W…


为WordPress文章内超链接前面自动增加图标

为WordPress文章内超链接前面自动增加图标

如何自动为Wordpress文章内超链接前面增加图标,如下图所示。 直接上代码吧 在主题的function.php中加入如下代码即可…


分享一套至尊法宝之[ 顺口溜 ]_致建站的我们(建议收藏)

分享一套至尊法宝之[ 顺口溜 ]_致建站的我们(建议收藏)

准备篇:网络行业千千万,确定主题是关键。空间域名带备案,快速稳定是首选。 建设篇:网站结构要整齐,树形网状是第一。内部链接做到底,平…


重定向wp-login.php登录到指定页面

重定向wp-login.php登录到指定页面

如果你的WordPress网站已有前端登录注册功能,不想让其他人通过访问wp-login.php登录页面,并且当访问WordPres…


(认识WordPress)一文开始了解认识WordPress

(认识WordPress)一文开始了解认识WordPress

Wordpress是一个以PHP和MySQL为平台的免费自由开源的博客软件和内容管理系统。 WordPress拥有互联网内容管理系统…


WordPress网站SEO优化教程

WordPress网站SEO优化教程

做网站的同学会考虑seo。毕竟有流量才能生存;只要你能活下来,你就有机会活得更好。结合我之前在一家公司负责一个搜索产品的事实,按照“…


去除WordPress最新版本的评论勾选框

去除WordPress最新版本的评论勾选框

WordPress升级到4.9.6之后,新增了一个功能,评论处出现一个勾选框,确认是否存储Cookie信息的隐私选项,如果使用自带的…


添加自定义模块到WordPress 后台仪表板中

添加自定义模块到WordPress 后台仪表板中

如果想在 WordPress 仪表板中添加一个自定义的模块,可以将下面代码添加到当前主题函数模板functions.php中: ad…


Gutenberg 9.0 改进导航界面和查询块的条件

Gutenberg 9.0 改进导航界面和查询块的条件

古腾堡编辑器 Gutenberg 9.0发布了!此版本的主要重点是对导航界面和查询块的改进。 导航界面外观进行了新的改进,现在支持在…


修改WordPress数据库前缀 方便开启缓存以及消除可能存在的安全隐患

修改WordPress数据库前缀 方便开启缓存以及消除可能存在的安全隐患

很多第一次接触 WordPress 的博主站长们在安装 WordPress 的时候,都是直接使用数据库的默认表前缀 wp_,据说这个…


使用Memcached内存缓存优化 WordPress 自动草稿功能

使用Memcached内存缓存优化 WordPress 自动草稿功能

Memcached 内存缓存可以优化 WordPress 很多功能,让你的 WordPress 变得更快,接下来我们会通过一系列文章…


WordPress文章标题为空时其它内容代替

WordPress文章标题为空时其它内容代替

在WordPress中时常存在某些文章不需要标题的情况,特别是在一些个人网站,他们常常使用一些不需要标题的post_format来写…


WordPress如何禁用古腾堡编辑器的全屏模式

WordPress如何禁用古腾堡编辑器的全屏模式

在WordPress 5.4版本更新后,为古腾堡编辑器默认采用了全屏的编辑模式,很多朋友可能并不习惯使用全屏模式来写作,那么如何关闭…