jsは記事の内容に基づいてディレクトリを生成し、アンカーリンクからジャンプし、タイトルに基づいてディレクトリを生成します

効果画像：

アンカーリンクのジャンプは、<ahref = "＃t0">タイトル</a>と<a name="t0"> </a>によって実現されることは誰もが知っています。タグをクリックすると、次の場所にジャンプします。現在のhref値と同じタグ名値の位置（＃記号を除く）。

一般的な記事は、h1〜h5のタイトルとpタグのリッチテキストで実装されます。csdnなど、合計1〜3のタイトルしかない美学向けの記事もあるため、記事のコンテンツのタイトルタグをトラバースして、対応するコンテンツ。

コード：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .container{
            position: absolute;
            width:100%;
            height:100%;
            display: flex;
        }
        .directory{
            min-width: 200px;
            overflow-y: auto;
        }
        .content{
            flex:1;
            overflow-y: auto;
        }
        #category a{
            padding: 0 16px;
            /* font-weight: 500; */
            color: #2d2e2f;
            outline: none;
            text-decoration: none;
            line-height: 30px;
        }
        #category a:hover{
            background: #efefef;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="directory">
            <div id="category"></div>
        </div>
        <div class="content">
            <h1>一、种植方法。</h1>
            <div>
                <h2>1.种植步骤。</h2>
                <p>草莓适合种植在阳光充足，疏水性好的土壤里。土壤深度大约在8-10英寸。</p>
                <div>
                    <h3>种植时间</h3>
                    <p>春天和秋天</p>
                    <div>
                        <h4>种植温度</h4>
                        <p>不热不冷</p>
                        <div>

                            <h5>种植土</h5>
                            <p>田野土</p>
                        </div>
                    </div>
                </div>
                <h2>2.日常养护</h2>
                <p>多施肥，多浇水。</p>
            </div>
            <h1>二、水肥管理。</h1>
            <div>
                <h2>1.化肥选择。</h2>
                <p>尿素和磷酸二氢钾。</p>
                <h2>2.浇水频率</h2>
                <p>每天三次，早中晚。</p>
            </div>
            <h1>三、枝叶修剪。</h1>
            <div>
                <h2>1.老叶病叶。</h2>
                <p>出现老叶及时修剪，防止浪费多余营养。</p>
                <h2>2.病根移除、</h2>
                <p>发现病根及时处理掉，防止传染。</p>
            </div>
            <h1>四、人工授粉。</h1>
            <div>
                <h2>1.授粉</h2>
                <p>毛笔刷</p>
            </div>
            <h1>五、新苗培育。</h1>
            <div>
                <h2>1.新苗。</h2>
                <p>每到夏天，草莓就会生长很多匍匐茎。</p>
            </div>
        </div>
    </div>
</body>
</html>
<script src='./jquery.3.2.1.min.js'></script>
<script>
//目录的生成需要等待文章加载完成之后再生成。
var padding=[10,20,30,40,50];//不同的标题等级缩进大小
$('.content').find('h1,h2,h3,h4,h5').each(function(index,item){
    var that=$(this);
    $('<a name="c'+index+'"></a>').insertBefore(that);//插入锚点地址
    var tagName=that[0].tagName.toLowerCase();
    var tagIndex=parseInt(tagName.charAt(1))-1;//根据标题等级分类，并设置不同的缩进。
    $('#category').append($('<a href="#c'+index+'" style="padding-left:'+padding[tagIndex]+'px;display:block;">'+that.text()+'</a>'));
});
</script>

jsは記事の内容に基づいてディレクトリを生成し、アンカーリンクからジャンプし、タイトルに基づいてディレクトリを生成します

おすすめ