js 根据文章内容生成目录，锚点链接跳转，根据标题生成目录

效果图：

我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a>实现的，点击a标签后，会跳转到与当前href值（除#号）与之相同的a标签name值的位置。

一般的文章都是都过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 根据文章内容生成目录，锚点链接跳转，根据标题生成目录相关推荐

markdown 链接跳转到标题_markdown中锚链接实现目录跳转以及注意事项
当文章有分类,需要快速阅读,通常会先在文首部写一个目录,点击可以跳转. 为文章写目录,特别在文章较长的时候,有助于对内容的整体把握,能提高阅读效率. 以下,将写一个基本的锚目录demo,然后特别说明需 ...
markdown 链接跳转到标题_如何使用markdown语法来写文章
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建. Markdown 编写的 ...
WordPress给文章内容中指定关键词添加链接
使用方法将下面代码粘贴到自己使用的Wordpress主题的functions.php文件中. function replace_text_wps($text){$replace = array( ' ...
【CSS】锚点链接的应用
文章目录锚点链接的应用锚点链接的应用语法: <标签 id="#命名锚记名称"></标签> 示例: <p id="dw"> ...
从视频到语言: 视频标题生成与描述研究综述
来源:专知本文约5000字,建议阅读9分钟最新视频视频标题生成与描述研究综述论文. 视频标题生成与描述是使用自然语言对视频进行总结与重新表达. 由于视频与语言之间存在异构特性, 其数据处理过程较为 ...
Qrcode生成二维码链接地址,网页授权获取微信用户信息
(1)一个简单的二维码地址生成使用easywechat扫描获取微信用户的信息: 首先生成二维码链接这里引用的QrCode生成的 QrCode::size(300)->generate($url] ...
利用新浪API批量生成t.cn 短链接的接口有哪些？
新浪提供了长链接转为短链接的API,可以把长链接转为t.cn/xxx这种格式的短链接.短链接对于一些商家来说使用价值非常大,故整理了6个较为好用的t.cn短链接批量生成接口. 1.快鸟短网址随着移动 ...
简单的生成文章内容目录（vue可用）
在富文本辑编器里面写文章时,我们通常会使用h1-h6标签来定义章节标题.在用户端显示时希望展示目录结构.如图: 这里生成目录结构可以借助第三方插件来实现,但某些情况下不希望引用太多的第三方资源就需要自 ...
帝国cms把网站文章内容生成word文档下载插件
帝国cms把网站文章内容生成word文档下载插件插件介绍 jQuery Word Export是一款可以将网页中的文字导出到微软Word文档中的jQuery插件.它通过FileSaver.js文件来 ...

js 根据文章内容生成目录，锚点链接跳转，根据标题生成目录

js 根据文章内容生成目录，锚点链接跳转，根据标题生成目录相关推荐

最新文章

热门文章