如何使文章内容自动生成目录

链接:https://pan.baidu.com/s/1uICmDLUi4fRh_nqStzzM9g
提取码:n2rt

文件结构:
在这里插入图片描述
使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字排版测试</title>
	<link rel="stylesheet" type="text/css" href="./css/typo.css">
	<!-- 引入css -->
	<link rel="stylesheet" type="text/css" href="./tocbot/tocbot.css">
</head>
<body>
    <!-- 生成目录的位置 -->
	<div style="float: right;width: 200px">
		<span>目录</span>
		<!--使用类js-toc -->
        <ol class="js-toc">

	    </ol>
	</div>
		<h1>终身学习</h1>
		<!-- 使用类js-toc-content -->
	<div class=" typo typo-selection js-toc-content">
		<p>终身学习是指社会每个成员为适应社会发展和实现个体发展的需要,贯穿于人的一生的,持续的学习过程。即我们所常说的“活到老学到老”或者“学无止境”。在特殊的社会、教育和生活背景下,终身学习理念得以产生,它具有终身性、全民性、广泛性等特点。终身教育和终身学习提出后,各国普遍重视并积极实践。终身学习启示我们树立终身教育思想,使学生学会学习,更重要的是培养学生养成主动的、不断探索的、自我更新的、学以致用的和优化知识的良好习惯。</p>
		<!-- 在需要生成目录的h上加id -->
	   <h2 id="item-1">1、终身性</h2>
	   <h3 id="item-1-1">终身性说明1</h3>
	   <h3 id="item-1-2">终身性说明2</h3>
	   <p>这是终身教育最大的特征。它突破了正规学校的框架,把教育看成是个人一生中连续不断的学习过程,是人们在一生中所受到的各种培养的总和,实现了从学前期到老年期的整个教育过程的统一。既包括正规教育,又包括非正规教育。它包括了教育体系的各个阶段和各种形式。</p>
	   <h2 id="item-2">2、全民性</h2>
	   <h3 id="item-2-1">全民性说明</h3>
	   <p>终身教育的全民性,是指接受终身教育的人包括所有的人,无论男女老幼、贫富差别、种族性别。联合国教科文组织汉堡教育研究员达贝提出终身教育具有民主化的特色,反对教育知识为所谓的精英服务,是具有多种能力的一般民众能平等获得教育机会。而事实上,当今社会中的每一个人,都要学会生存,而要学会生存就离不开终身教育,因为生存发展是时代的主流,会生存必须会学习,这是现代社会给每个人提出的新课题。</p>
	   <h2 id="item-3">3、广泛性</h2>
	   <h3 id="item-3-1">广泛性说明</h3>
	   <p>终身教育既包括家庭教育、学校教育,也包括社会教育。可以这么说,它包括人的各个阶段,是一切时间、一切地点、一切场合和一切方面的教育。终身教育扩大了学习天地,为整个教育事业注入了新的活力。</p>
	   <h2 id="item-4">4、灵活与实用性</h2>
	   <h3 id="item-4-1">灵活与实用性说明</h3>
	   <p>现代终身具有灵活性,表现在任何需要学习的人,可以随时随地接受任何形式的教育。学习的时间、地点、内容、方式均由个人决定。人们可以根据自己的特点和需要选择最适合自己的学习。</p>
	</div>

<!-- 引入js -->
<script src="./tocbot/tocbot.min.js"></script>
<script type="text/javascript">
		//目录生成初始化
	    tocbot.init({
	        // Where to render the table of contents.
	        tocSelector: '.js-toc',
	        // Where to grab the headings to build the table of contents.
	        contentSelector: '.js-toc-content',
	        // Which headings to grab inside of the contentSelector element.
	        headingSelector: 'h2,h3',//对h2和h3元素进行生成目录
	        // For headings inside relative or absolute positioned containers within content.
	        hasInnerContainers: true,
	    });

</script>

	
	
</body>
</html>

效果如图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/pilgrim_121/article/details/105518133