使用jQuery给网页自动生成二级导航目录

使用jQuery给网页自动生成二级导航目录

自己有一个分章节的网页，类似百度百科的词条页面，就做了个二级导航目录。你只需把导航目录代码content放在需要的位置即可。

var jquery_h3_list = $('h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
    if(jquery_h3_list.length>0)
    {
        var content = '';
        //content    += '
';
        for(var i =0;i

'; var go_to_top = ''; $(jquery_h3_list[i]).before(go_to_top); var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h3"); if(jquery_h4_list.length>0) { var li_content = '

' + $(jquery_h3_list[i]).text() + ''; //var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h3"); li_content +='

'; } else{ var li_content = '
• ' + $(jquery_h3_list[i]).text() + ''; //var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h3"); } for(var j = 0;j < jquery_h4_list.length;j++) { //var go_to_top2 = '
  '; var go_to_top2 = ''; $(jquery_h4_list[j]).before(go_to_top2); li_content +='
• ' + $(jquery_h4_list[j]).text() + '
'; } if(jquery_h4_list.length>0) { li_content +='

'; } li_content +='

'; content += li_content; }

需要说明的是，代码参考了互联网上另一位作者的。Ta写的是为某博客写的类似插件的
代码，我在此基础上进行了修改，并对添加了对Bootstrap的适应。由于Ta的博客已声明停更，不能保证链接稳定性，就不附链接了，有需要的自行百度查找。也欢迎大家将此代码修改优化后发布。

代码及本文采用GNU General Public License v3.0协议进行开源。

原文来自作者博客