根据文章页面的h1,h2标签信息,生成文章多级目录。

8个月前 (09-07)

类似这种的目录,根据文章中的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. })  

效果如图:

相关文章

  • * 暂无相关文章
  • 紧跟行业趋势,选择我们,让你的网站永不落伍!

    比格主题bigetheme,是国内为数不多的WordPress网站建设开发团队,我们提供WordPress主题,WordPress企业主题,WordPress博客主题,WordPress模板,WordPress主题下载,WordPress插件下载,WordPress主题开发服务。


    扫码加我微信


    img
    加入群聊一起交流吧