HTML JS CSS pour générer le code du répertoire d’articles

2022-09-12 17:48:10 lundi 3914 mots

文章生成目录，无非就是JS判断h2、h3的问题。

文章生成目录JS代码

<script>
   $(document).ready(function() {
               //生成目录索引列表
               function GenerateContentList() {
                   var jquery_h2_list = $('.article-content h2'); //如果你的章节标题不是h2,只需要将这里的h2换掉即可
                   if (jquery_h2_list.length > 0) {
                       var content = '<div class="catalogue-box"><a name="_labelTop"></a>';
                       content += '<div class="catalogue"><div class="catalogue-title"><i class="iconfont icon-mulu"></i>文章目录</div><div class="catalogue-content"> ';
                       content += '<ul class="tr1">';
                       for (var i = 0; i < jquery_h2_list.length; i++) {
                           var go_to_top = '<div><a name="_lab' + i + '"></a></div>';
                           $(jquery_h2_list[i]).before(go_to_top);
                           var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h2_list[i]).text() + '</a>';
                           var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i + 1], "h3");
                           if (jquery_h3_list.length > 0) {
                               li_content += '<ul>';
                           }
                           for (var j = 0; j < jquery_h3_list.length; j++) {
                               var go_to_top2 = '<div><a name="_lab2' + i + j + '"></a></div>';
                               $(jquery_h3_list[j]).before(go_to_top2);
                               li_content += '<li><a href="#_lab2' + i + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>';
                           }
                           if (jquery_h3_list.length > 0) {
                               li_content += '</ul>';
                           }
                           li_content += '</li>';
                           content += li_content;
                       }
                       content += '</ul>';
                       content += '</div></div>';
                       if ($('.article-content').length != 0) {  //修改内容标签
                           $($('.article-content')[0]).prepend(content);  //修改内容标签
                       }
                   }
               }
               GenerateContentList();
   });
</script>

帝国cms文章生成目录css样式

<style type="text/css">
.catalogue-box {
    float: right;
    border: 1px solid #DEDFE1;
    max-width: 350px;
    min-width: 300px;
    -moz-border-radius: 6px;
    margin: 0 0 20px 15px;
    padding: 10px 6px;
    font-size: 14px;
}
.catalogue-title {
    border-bottom: 1px dashed #DDD;
    display: block;
    line-height: 30px;
    padding: 0 4px;
    color: #333;
}
.catalogue-box ul li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    list-style-type: disc;
    padding: 0;
    margin: 0 0 0 25px;
}
.catalogue-box ul li a {
    outline: none;
    color: #888;
    text-decoration: none;
    background: transparent;
}
</style>

注意，这里只是H2、H3生成了文章目录，其他标题标签不起作用

注意要点一：.article-content h2，是文章内容div.article-content容器内h2