jquer+vue自动提取生成目录

SoberChi

已于 2022-06-12 23:46:54 修改

阅读量523

点赞数 1

分类专栏： html 文章标签： vue jquery html

于 2020-09-19 10:23:52 首次发布

本文链接：https://blog.csdn.net/weixin_44959182/article/details/108677547

版权

html 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

jquer+vue根据标题自动生成目录并且秒点定位，话不多说直接上代码。本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquer+vue根据标题自动生成目录</title>
		<!-- 本地JS -->
		<script src="./jquery.js"></script>
			<!-- cdn方式VUE -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>//cdn VUE
		<style>
			#point{
				margin-bottom: 580px;
			}
			#point h1{
				font-size: 32px;
				color: red;
			}
			#point h2{
				font-size: 24px;
				color: aqua;
			}
			#point h3{
				font-size: 16px;
				color:#666;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<p>锚点定位器</p>
				<div v-html="point" id="point"></div>
			</div>
			<div id="text">
				<h1>这里是一级标题A</h1>
				<h2>这里是二级标题</h2>
				<p>aaa</p>
				<h2>这里是二级标题</h2>
				<h2>这里是二级标题</h2>
				<h3>这里是三级标题</h3>
				<h1>这里是一级标题B</h1>
				<h2>这里是二级标题</h2>
				<h3>这里是三级标题</h3>
			</div>
		</div>
	</body>
	<script type="text/jscript">
		var vm = new Vue({
			el: "#app",
			data: {
				point: {}

			},
			mounted() {
				var points = $('#text') //内容列表
				var point = ''
				//循环获取内容的所有标签
				for (var i = 0; i < points[0].children.length; i++) {
					// 获取带H的标签
					if (points[0].children[i].localName.indexOf('h') !== -1) {

						// 获取h2
						if (points[0].children[i].localName.indexOf('h1') !== -1) {
							points[0].children[i].className = i

						}
						// // 获取h2
						if (points[0].children[i].localName.indexOf('h2') !== -1) {
							points[0].children[i].className = i
						}
						//获取h3
						if (points[0].children[i].localName.indexOf('h3') !== -1) {
							points[0].children[i].className = i
						}

						const title = $.extend(true, {}, points[0].children[i]);


						point += title.outerHTML
						points[0].children[i].id = `h1_id_${i}`
					}


				}

				this.point = point

				//循环获取标题标签给内容加点击事件

				//延迟0秒
				setTimeout(function() {

					//循环获取内容的所有标签
					for (var i = 0; i < $('#point')[0].children.length; i++) {
						// $('#point')[0].children[i].className 设置class名称

						//绑定点击事件根据className定位内容ID位置
						$($('#point')[0].children[i]).click(function(e) {
							location.href = `#h1_id_${e.target.className}`;
						})
					}
				}, 0); //延时10秒
			},
			methods: { //这个methods属性中定义了当前vue实例所有可用的方法

			}
		})
	</script>
</html>