WRZ博客

jqurey实现文章目录

当你文章过长,文章重点比较多的时候为了给读者一个好的体验 最通用的办法就是给这篇文章画上重点也就是目录。不管你是用的什么程序WP zblog Emlog typecho 或者别的论坛程序 此方法都可以简单的实现文章目录功能。 我们开始操作吧!

第一步:加载js和css

<script src="js/jquery.autoMenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.autoMenu.css"> 

第二步:调用方法

 <div class="autoMenu" id="autoMenu" data-autoMenu></div>
  $("#autoMenu").autoMenu({
    levelOne : 'h2', //一级标题
    levelTwo : 'h3',  //二级标题(暂不支持更多级)
    width : 200, //容器宽度
    height : 400, //容器高度
    padding: 20, //内部间距
    offTop : 100 //滚动切换导航时离顶部的距离
 }); 

第三步:使用方法

编辑文章时 把需要在目录中显示的文字 用 H2 和 H3标签 包裹住就行

分享
已有3条评论