使用JS生成html頁面的目錄索引

在頁面中的指定標題的版塊添加錨鏈接,按照規(guī)則生成目錄。
html代碼
<div id="contentDiv">
<h3><span style="font-size: 18px;"> 1、標題一</span></h3>
<h3><span style="font-size: 18px;"> 2、標題二</span></h3>
<h3><span style="font-size: 18px;">3、標題三</span></h3>
</div>
js代碼
<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
var jquery_h3_list = $('#contentDiv h3');//如果你的章節(jié)標題不是h3,只需要將這里的h3換掉即可
if(jquery_h3_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>閱讀目錄</b></p>';
content += '<ul>';
for(var i =0;i<jquery_h3_list.length;i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
}
GenerateContentList();
</script>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 請參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,791評論 2 19
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱: 工作地點 崗位名...
    lilyping閱讀 2,015評論 0 1
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,861評論 1 19
  • 今天幫一個大學同學咨詢考博士的問題在網(wǎng)上,但是感覺那是個機器人在回答我,后來想到為什么我自己的微信每天那么多人在群...
    小灰輝先生閱讀 2,204評論 0 0
  • 寫在前面 6月27日,我在ThoughtWorks PM社區(qū)上做了一個直播分享——項目管理標準化。 在這次分享中,...
    萬學凡閱讀 4,163評論 0 7

友情鏈接更多精彩內(nèi)容