使用jQuery给网页自动生成二级导航目录
自己有一个分章节的网页，类似百度百科的词条页面，就做了个二级导航目录。你只需把导航目录代码content放在需要的位置即可。
var jquery_h3_list = $('h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
if(jquery_h3_list.length>0)
{
var content = '';
//content += '<ul style="list-style-type:none;text-align: left;margin:2px 2px;">';
for(var i =0;i<jquery_h3_list.length;i++)
{
//var go_to_top = '<div style="text-align: right"><a name="_lab' + i + '"></a></div>';
var go_to_top = '<a name="_lab' + i + '"></a>';
$(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 = '<li class="dropdown"><a href="#_lab' + i + '" class="dropdown-toggle" data-toggle="dropdown">' + $(jquery_h3_list[i]).text() + '</a>';
//var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h3");
li_content +='<ul class="dropdown-menu">';
}
else{
var li_content = '<li class="dropdown"><a href="#_lab' + i + '" >' + $(jquery_h3_list[i]).text() + '</a>';
//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 = '<div style="text-align: right"><a name="_lab2'+ i + j + '"></a></div>';
var go_to_top2 = '<a name="_lab2'+ i + j + '"></a>';
$(jquery_h4_list[j]).before(go_to_top2);
li_content +='<li><a href="#_lab2'+ i + j + '">' + $(jquery_h4_list[j]).text() + '</a></li>';
}
if(jquery_h4_list.length>0)
{
li_content +='</ul>';
}
li_content +='</li>';
content += li_content;
}
需要说明的是，代码参考了互联网上另一位作者的。Ta写的是为某博客写的类似插件的
代码，我在此基础上进行了修改，并对添加了对Bootstrap的适应。由于Ta的博客已声明停更，不能保证链接稳定性，就不附链接了，有需要的自行百度查找。也欢迎大家将此代码修改优化后发布。
