tmp.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  6. <title>jquery根据文章h标签自动生成导航目录</title>
  7. <link rel="stylesheet" type="text/css" href="https://web.tianyunperfect.cn/simple/toc/jquery.autoMenu.css">
  8. <script src="https://web.tianyunperfect.cn/simple/toc/jquery.autoMenu.js"></script>
  9. </head>
  10. <body>
  11. <div class="autoMenu" id="autoMenu" data-autoMenu></div>
  12. <div id="content">
  13. 一路黔行,醉美贵州——黔西南、黔南游记
  14. <h2>摘要1</h2>
  15. <div style="height:800px;">
  16. 第一天抵达贵阳后,先游青岩古镇,后品酸汤鱼 宿:贵阳;第二天白天游览安顺黄果树后,晚上至黔西南州兴义入住;第三天游览完万峰林和马岭河大峡谷,返回安顺;第四天火车前往荔波游览,晚上住小七孔;第五天上午继续游玩小七孔,下午回到贵阳,晚上航班离开贵州。五天的贵州之行,完全采取坐火车坐班车的旅行方式,安排紧凑,由于第一次来到贵州,黄果树景区之大超出预期,加上火车晚点以及班车停开,虽最终均按计划走完行程,其中的曲曲折折,还是留下深刻的教训
  17. </div>
  18. <h3>第1天</h3>
  19. <div style="height:800px;">第1天内容</div>
  20. <h3>第2天</h3>
  21. <h4>第212天</h4>
  22. <h2>摘要2</h2>
  23. <div style="height:800px;">第2天内容</div>
  24. <h3>第3天</h3>
  25. <div style="height:800px;">第3天内容</div>
  26. <h3>第4天</h3>
  27. <div style="height:800px;">第4天内容</div>
  28. <h3>第5天</h3>
  29. <div style="height:800px;">第5天内容</div>
  30. </div>
  31. <!-- 生成博客目录的JS代码,两级目录 -->
  32. <script type="text/javascript">
  33. window.onload=function () {
  34. BlogDirectory.createBlogDirectory("#content", "h2", "h3", 20);
  35. }
  36. </script>
  37. </body>
  38. </html>