根据文章中H标签自动生成文章目录

以前看到上的目录结构就想把它移植到博客里，今天抽了个空从上拔下了代码。

js代码，复制放入到single.php页面中

<script type="text/javascript">// < ![CDATA[
jQuery(document).ready(function(){
               buildCTable();
});
function buildCTable() {
    var hs = jQuery(".entry-content").find("h1,h2,h3,h4,h5,h6");
    if (hs.length < 2) return;
    var s = "";
    s += '<div style="clear:both"></div>';
    s += '<div class="roundDiv" >';
    s += '<p style="text-align:right;margin:0;"><span style="float:left;color:#F00">目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a></span><a href="#" onclick="javascript:return openct(this);" title="展开">[+]</a></p>';
    s += '<ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;">';
    var old_h = 0, ol_cnt = 0;
    for (var i = 0; i < hs.length; i++) {
        var h = parseInt(hs[i].tagName.substr(1), 10);
        if (!old_h) old_h = h;
        if (h > old_h) {
            s += "<ol>";
            ol_cnt++;
        } else if (h < old_h && ol_cnt > 0) {
            s += "</ol>";
            ol_cnt--;
        }
        if (h == 1) {
            while (ol_cnt > 0) {
                s += "</ol>";
                ol_cnt--;
            }
        }
        old_h = h;
        var tit = hs.eq(i).text().replace(/^[\d.、\s]+/g, "");
        tit = tit.replace(/[^a-zA-Z0-9_\-\s\u4e00-\u9fa5]+/g, "");
        if (tit.length < 100) {
	    //将每一个h标签拼接到s上，生成目录
            s += '<li><a href="#t' + i + '">' + tit + "</a></li>";
	    //给文章中的h标签加上id
            hs.eq(i).html('<a name="t' + i + '"></a>' + hs.eq(i).html());
        }
    }
    while (ol_cnt > 0) {
        s += "</ol>";
        ol_cnt--;
    }
    s += "</ol></div>";
    s += '<div style="clear:both"></div>';
    jQuery(s).insertBefore(jQuery(".entry-content"));
}

function openct(e) {
    if (e.innerHTML == "[+]") {
        jQuery(e).attr("title", "收起").html("[-]").parent().next().show();
    } else {
        jQuery(e).attr("title", "展开").html("[+]").parent().next().hide();
    }
    e.blur();
    return false;
}
// ]]></script>

带圆角的div框

.roundDiv{
   float:left; 
   min-width:200px;
   margin: 4px  10px;
   position: relative!important;
   overflow: auto!important;
   background-color: #eee!important;
   border: 1px solid #ccc!important;
   border-radius: 4px!important;
   border-collapse: separate!important;
}