博客园Cnblog为文章添加目录

纸上得来终觉浅,绝知此事要躬行

先看了

当发现原因后,就给博客园Cnblog发了一封请求开通后台javascript编辑保存的Email, 好在博客园Cnblog回复得很快,第2天就帮我开通了,非常感谢办事的高效.

博客园Cnblog为文章添加目录

Review人家是代码,噢知道了实现原理,有收获.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
//生成目录索引列表
//实现在<div >下插入我们拼接的动态目录html内容
function GenerateContentList()
{
    var jquery_h3_list = $('#likecs_post_body h3');//查找div 下所有的h3节点
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>'; //锚(#_labelTop):回到目录,
        content += '<div >;     
        content += '<p style="font-size:16px"><b>阅读目录</b></p>';
        content += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            //功能1
            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);//在每个h3节点封装jQuery对象,然后在前面插入新生成的"回到目录"html
            //功能2
            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }
        content += '</ul>';
        content += '</div>';
        if($('#likecs_post_body').length != 0 )//验证$('#likecs_post_body')取到jQuery对象
        {
            $($('#likecs_post_body')[0]).prepend(content);//推测:$('#likecs_post_body')[0]取到html元素,在封装成jQuery对象
        }                                                  //在div 下插入动态生成html     
    }    
}
GenerateContentList();

</script>

博客园Cnblog为文章添加目录

其它Cnblog原生式样

<p class="postTitle"><a href="http://xxx.html" target="_blank">jQuery创建动态按钮事件</a></p>