二级标题

三级标题

三级标题

三级标题

三级标题

三级标题

二级标题

三级标题

三级标题

三级标题

三级标题

三级标题

这里是现在页尾目录功能的代码源码：

  1. <!-- 目录索引列表生成 -->
  2. <script language="javascript" type="text/javascript">
  4. function GenerateContentList()
  5. {
  6.     if ($('#cnblogs_post_body').length == 0) { return; }
  7.     var jquery_h1_list = $('#cnblogs_post_body h1');
  8.     var jquery_h2_list = $('#cnblogs_post_body h2');
  9.     var jquery_h3_list = $('#cnblogs_post_body h3');
  11.     if (jquery_h1_list.length != 0)
  12.     {
  13.         var content = '<a name="_labelTop"></a>';
  14.         content    += '<div id="navCategory">';
  15.         content    += '<p style="font-size:18px"><b>目录</b></p>';
  16.         content += '<ul class="first_class_ul">';
  18.         for (var i = 0; i < jquery_h1_list.length; i++)
  19.         {
  20.             var go_to_top = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_label' + i + '"></a></div>';
  21.             $(jquery_h1_list[i]).before(go_to_top);
  22.             var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
  23.             var nextH1Index = i + 1;
  24.             if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
  25.             var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
  26.             if (jquery_h2_list.length > 0)
  27.             {
  28.                 li_content += '<ul class="second_class_ul">';
  29.             }
  30.             for (var j = 0; j < jquery_h2_list.length; j++)
  31.             {
  32.                 var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
  33.                 $(jquery_h2_list[j]).before(go_to_top2);
  34.                 li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
  35.                 var nextH2Index = j + 1;
  36.                 var next;
  37.                 if (nextH2Index == jquery_h2_list.length)
  38.                 {
  39.                     if (i + 1 == jquery_h1_list.length)
  40.                     {
  41.                         next = jquery_h1_list[0];
  42.                     }
  43.                     else
  44.                     {
  45.                         next = jquery_h1_list[i + 1];
  46.                     }
  47.                 }
  48.                 else
  49.                 {
  50.                     next = jquery_h2_list[nextH2Index];
  51.                 }
  52.                 var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
  53.                 if (jquery_h3_list.length > 0)
  54.                 {
  55.                     li_content += '<ul class="third_class_ul">';
  56.                 }
  57.                 for (var k = 0; k < jquery_h3_list.length; k++)
  58.                 {
  59.                     var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
  60.                     $(jquery_h3_list[k]).before(go_to_third_Content);
  61.                     li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
  62.                 }
  63.                 if (jquery_h3_list.length > 0)
  64.                 {
  65.                     li_content += '</ul>';
  66.                 }
  67.                 li_content += '</li>';
  68.             }
  69.             if (jquery_h2_list.length > 0)
  70.             {
  71.                 li_content +='</ul>';
  72.             }
  73.             li_content +='</li>';
  74.             content += li_content;
  75.         }
  76.         content    += '</ul>';
  77.         content    += '</div>';
  78.     }
  79.     else if (jquery_h2_list.length != 0)
  80.     {
  81.         var content = '<a name="_labelTop"></a>';
  82.         content    += '<div id="navCategory">';
  83.         content    += '<p style="font-size:18px"><b>目录</b></p>';
  84.         content    += '<ul class="second_class_ul">';
  85.         for(var i =0; i < jquery_h2_list.length; i++)
  86.         {
  87.             var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
  88.             $(jquery_h2_list[j]).before(go_to_top2);
  89.             var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>';
  90.             var nextH1Index = i + 1;
  91.             if (nextH1Index == jquery_h2_list.length) { nextH1Index = 0; }
  92.             var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i+1], "h3");
  93.             if(jquery_h3_list.length>0)
  94.             {
  95.                 li_content +='<ul class="third_class_ul">';
  96.             }
  97.             for(var j = 0;j < jquery_h3_list.length;j++)
  98.             {
  99.                 var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
  100.                 $(jquery_h3_list[k]).before(go_to_third_Content);
  101.                 li_content +='<li><a href="#_lab2'+ i +'_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';
  102.             }
  103.             if(jquery_h3_list.length>0)
  104.             {
  105.                 li_content +='</ul>';
  106.             }
  107.             li_content +='</li>';
  108.             content += li_content;
  109.         }
  110.         content    += '</ul>';
  111.         content    += '</div>';
  112.     }
  113.     else if (jquery_h3_list.length != 0)
  114.     {
  115.         var content = '<a name="_labelTop"></a>';
  116.         content    += '<div id="navCategory">';
  117.         content    += '<p style="font-size:18px"><b>目录</b></p>';
  118.         content    += '<ul>';
  119.         for(var i = 0; i < jquery_h3_list.length; i++)
  120.         {
  121.             var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '"></a></div>';
  122.             $(jquery_h3_list[k]).before(go_to_third_Content);
  123.             var li_content = '<li><a href="#_label3' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
  124.             content += li_content;
  125.         }
  126.         content    += '</ul>';
  127.         content    += '</div>';
  128.     }
  129.     else
  130.     {
  131.         return;
  132.     }
  133. $($('#cnblogs_post_body')[0]).prepend(content);
  134. }
  135. GenerateContentList();
  136. </script>

有bug，我看见了，但是我改过了之后，还是一样的，没有成功。

以下是第一次修改后的代码段：

  1. <!-- 目录索引列表生成 -->
  2. <script language="javascript" type="text/javascript">
  4. function GenerateContentList()
  5. {
  6.     if ($('#cnblogs_post_body').length == 0) { return; }
  7.     var jquery_h1_list = $('#cnblogs_post_body h1');
  8.     var jquery_h2_list = $('#cnblogs_post_body h2');
  9.     var jquery_h3_list = $('#cnblogs_post_body h3');
  11.     if (jquery_h1_list.length != 0)
  12.     {
  13.         var content = '<a name="_labelTop"></a>';
  14.         content    += '<div id="navCategory">';
  15.         content    += '<p style="font-size:18px"><b>目录</b></p>';
  16.         content += '<ul class="first_class_ul">';
  18.         for (var i = 0; i < jquery_h1_list.length; i++)
  19.         {
  20.             var go_to_top = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_label' + i + '"></a></div>';
  21.             $(jquery_h1_list[i]).before(go_to_top);
  22.             var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
  23.             var nextH1Index = i + 1;
  24.             if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
  25.             var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
  26.             if (jquery_h2_list.length > 0)
  27.             {
  28.                 li_content += '<ul class="second_class_ul">';
  29.             }
  30.             for (var j = 0; j < jquery_h2_list.length; j++)
  31.             {
  32.                 var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
  33.                 $(jquery_h2_list[j]).before(go_to_top2);
  34.                 li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
  35.                 var nextH2Index = j + 1;
  36.                 var next;
  37.                 if (nextH2Index == jquery_h2_list.length)
  38.                 {
  39.                     if (i + 1 == jquery_h1_list.length)
  40.                     {
  41.                         next = jquery_h1_list[0];
  42.                     }
  43.                     else
  44.                     {
  45.                         next = jquery_h1_list[i + 1];
  46.                     }
  47.                 }
  48.                 else
  49.                 {
  50.                     next = jquery_h2_list[nextH2Index];
  51.                 }
  52.                 var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
  53.                 if (jquery_h3_list.length > 0)
  54.                 {
  55.                     li_content += '<ul class="third_class_ul">';
  56.                 }
  57.                 for (var k = 0; k < jquery_h3_list.length; k++)
  58.                 {
  59.                     var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
  60.                     $(jquery_h3_list[k]).before(go_to_third_Content);
  61.                     li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
  62.                 }
  63.                 if (jquery_h3_list.length > 0)
  64.                 {
  65.                     li_content += '</ul>';
  66.                 }
  67.                 li_content += '</li>';
  68.             }
  69.             if (jquery_h2_list.length > 0)
  70.             {
  71.                 li_content +='</ul>';
  72.             }
  73.             li_content +='</li>';
  74.             content += li_content;
  75.         }
  76.         content    += '</ul>';
  77.         content    += '</div>';
  78.     }
  79.     else if (jquery_h2_list.length != 0)
  80.     {
  81.         if ($('#cnblogs_post_body').length == 0) { return; }
  82.         var jquery_h2_list = $('#cnblogs_post_body h2');
  83.         var jquery_h3_list = $('#cnblogs_post_body h3');
  84.         var content = '<a name="_labelTop"></a>';
  85.         content    += '<div id="navCategory">';
  86.         content    += '<p style="font-size:18px"><b>目录</b></p>';
  87.         content    += '<ul class="second_class_ul">';
  88.         for(var i =0; i < jquery_h2_list.length; i++)
  89.         {
  90.             var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目录</a><a name="_lab2_'+ i + '_' + j + '"></a></div>';
  91.             $(jquery_h2_list[j]).before(go_to_top2);
  92.             var li_content = '<li><a href="#_lab2' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>';
  93.             var nextH1Index = i + 1;
  94.             if (nextH1Index == jquery_h2_list.length) { nextH1Index = 0; }
  95.             var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i+1], "h3");
  96.             if(jquery_h3_list.length>0)
  97.             {
  98.                 li_content +='<ul class="third_class_ul">';
  99.             }
  100.             for(var j = 0;j < jquery_h3_list.length;j++)
  101.             {
  102.                 var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
  103.                 $(jquery_h3_list[k]).before(go_to_third_Content);
  104.                 li_content +='<li><a href="#_label3_'+ i +'_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';
  105.             }
  106.             if(jquery_h3_list.length>0)
  107.             {
  108.                 li_content +='</ul>';
  109.             }
  110.             li_content +='</li>';
  111.             content += li_content;
  112.         }
  113.         content    += '</ul>';
  114.         content    += '</div>';
  115.     }
  116.     else if (jquery_h3_list.length != 0)
  117.     {
  118.         if ($('#cnblogs_post_body').length == 0) { return; }
  119.         var jquery_h3_list = $('#cnblogs_post_body h3');
  120.         var content = '<a name="_labelTop"></a>';
  121.         content    += '<div id="navCategory">';
  122.         content    += '<p style="font-size:18px"><b>目录</b></p>';
  123.         content    += '<ul>';
  124.         for(var i = 0; i < jquery_h3_list.length; i++)
  125.         {
  126.             var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label3_' + i + '"></a></div>';
  127.             $(jquery_h3_list[k]).before(go_to_third_Content);
  128.             var li_content = '<li><a href="#_label3_' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
  129.             content += li_content;
  130.         }
  131.         li_content +='</li>';
  132.         content    += '</ul>';
  133.         content    += '</div>';
  134.     }
  135.     else
  136.     {
  137.         return;
  138.     }
  139. $($('#cnblogs_post_body')[0]).prepend(content);
  140. }
  141. GenerateContentList();
  142. </script>

导出目录的JS代码，与目录的三级标题测试的更多相关文章

  1. JSCover+WebDriver/Selenium获得JS 代码覆盖

    我们看JSCover(http://tntim96.github.io/JSCover/manual/manual.xml)介绍及使用说明的时候,往往被图形界面所吸引.这样的方式比較适合手工操作,点击 ...

  2. JAVA 导出 Excel， JS 导出 Excel

    本介绍两种Excle导出方法: JAVA 导出 Excle, JS 导出 Excle 1, js 根据 html 页面的 table > tr > td 标签导出 js代码: //导出 v ...

  3. Node.js教程系列~目录

    Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...

  4. 【Django】基于Django架构网站代码的目录结构

     经典的Django项目源码目录结构 Django在一个项目的目录结构划分方面缺乏必要的规范.在Django的官方文档中并没有给出大型项目的代码建议目录结构,网上的文章也是根据项目的不同结构也有适当的 ...

  5. vue源码分析—Vue.js 源码目录设计

    Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...

  6. java代码实现目录结构

    今天用java代码来实现.像我们电脑盘符那样的目录结构.在代码开始之前首先.介绍一下.用.java代码实现目录的思想. 第一步:完成基础的.大家想.我们是如何获取文件的.是不是用File类,直接就获取 ...

  7. [笔记][Web]利用JS生成博文目录及CSS定制博客

    0. 简介 进入到cnblog这个大园子以后,和其他的一些博客网站比起来,少了些小功能,比如旁边CSDN上的目录.不过好在大神辈出,博客园可以通过申请JS权限来进行目录的生成. 由于本人在JS以及CS ...

  8. Vue.js 源码目录设计（二）

    Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── se ...

  9. 使用FreePic2Pdf导出书签至Word建立层级目录——快速初始化Word笔记本目录

    使用FreePic2Pdf导出书签至Word建立层级目录 --快速初始化Word笔记本目录 文:安徽师范大学2014级计算机科学与技术 王昊 (Get Contact:441301158@qq.com ...

随机推荐

  1. 智能货柜 & 技术原理 (动态视觉识别 + 重力感应)

    智能货柜 & 技术原理 (动态视觉识别 + 重力感应) 智能货柜 拥有智能化.精细化运营模式的智能货柜成为代替无人货架继前进的方式. 相比无人货架来说,智能货柜的技术门槛更高,拥有 RFID. ...

  2. js {}与class属性描述符的区别

    let data = { name: "ajanuw", change() { this.name = "Ajanuw"; }, get message() { ...

  3. nasm astricmp函数 x86

    xxx.asm: %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export as ...

  4. Flutter: ValueListenableBuilder 内容与ValueListenable保持"同步"的窗口小部件

    API 使用这个修改状态可以不用setState(). class _MyHomeState extends State<MyHome> { final ValueNotifier< ...

  5. 1月加密货币交易所访问量破3亿！NGK生态星空计划、NGK生态所带来双重利好！

    据最新数据显示,2021年一月份,加密货币交易所网站的访问量急剧上升.约有3.44亿访问者涌入了加密货币交易所,超过2020年12月的1.96亿访问者总数,创2018年1月以来新高. 加密货币交易所网 ...

  6. 微信小程序：将yyyy-mm-dd格式的日期转换成yyyy-mm-dd hh:mm:ss格式的日期

    代码如下: changeDate1(e) { console.log(e); var date = new Date(e.detail.value); console.log(date); const ...

  7. .NET并发编程-数据并行

    本系列学习在.NET中的并发并行编程模式,实战技巧 内容目录 数据并行Fork/Join模式PLINQ 本小节开始学习数据并行的概念模式,以及在.NET中数据并行的实现方式.本系列保证最少代码呈现量, ...

  8. 你们一般都是怎么进行SQL调优的？MySQL在执行时是如何选择索引的？

    前言 过年回来的第二周了,终于有时间继续总结知识了.这次来看一下SQL调优的知识,这类问题基本上面试的时候都会被问到,无论你的岗位是后端,运维,测试等等. 像本文标题中的两个问题,就是我在实际面试过程 ...

  9. HDFS 03 - 你能说说 HDFS 的写入和读取过程吗？

    目录 1 - HDFS 文件的写入 1.1 写入过程 1.2 写入异常时的处理 1.3 写入的一致性 2 - HDFS 文件的读取 2.1 读取过程 2.2 读取异常时的处理 版权声明 1 - HDF ...

  10. 7.vue组件(二)--双向绑定,父子组件访问

    本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...