自动创建网页文章目录结构
2013-07-07 15:56
295 查看
前言:每当我们发布一篇具有较长内容的文章时,在每一个段落前都会该创建一个小标题以表示这一段落所讲的具体内 容。由于文章内容过长的原因用户可能会耗费一些时间去来回查找段落内容,因此如果为文章中创建一个文章目录结构,用户就可以快速的定位到相应的标题段落, 而不需要来回的滚动查找段落内容。
我想这样做的确可以为文章编排的质量加分,所以借此机会分享一个自动生成的网页文章目录结构的方法,以下这张图清楚的演示了文章目录结构的效果。
![](http://www.dgstore.net/images/dynamic-toc.jpg)
通常情况下我们在写一篇很长的文章时,都会将内容包裹在一个内容成内容层内,例如
在HTML5中我们可以这么写
正常情况下如果你想添加一个锚链接快速定位到相应的段落,你可以这么写。
还是到此为止吧,以上是手动添加锚链接的方式,下面就介绍一下如何利用jquery来为我们自动创建文章目录结构。
step 1: 首先我们先创建一个HTML变量
Step 2: 接下来循环遍历段落小标题h3
Step 3: 接着获取小标题h3的标题内容和标题ID,也就是写文章的时候创建的标题ID
Step 4: 创建一个目录结构然后把创建好的目录结构加到 article 元素里面
Step 5: 闭合标签
Step 6: 把创建好的目录结构插入到html页面内,大公告成。
总结:其实整个过程我们要做的就是利用js把文章中每个小段落的标题以及对应的ID都存储起来,接着将存储的数据利用js动态的创建出目录结构。
demo 演示
demo下载
我想这样做的确可以为文章编排的质量加分,所以借此机会分享一个自动生成的网页文章目录结构的方法,以下这张图清楚的演示了文章目录结构的效果。
![](http://www.dgstore.net/images/dynamic-toc.jpg)
通常情况下我们在写一篇很长的文章时,都会将内容包裹在一个内容成内容层内,例如
<div class="article"> <h3 id="question-one">Title of Question</h3> <!-- whatever other content, probably some paragraphs and stuff. --> <h3 id="question-two">Another Question</h3> <!-- whatever other content, probably some paragraphs and stuff. --> <!-- etc --> </div>
在HTML5中我们可以这么写
<article> <h3 id="question-one">Title of Question</h3> <!-- whatever other content, probably some paragraphs and stuff. --> <h3 id="question-two">Another Question</h3> <!-- whatever other content, probably some paragraphs and stuff. --> <!-- etc --> </article>
正常情况下如果你想添加一个锚链接快速定位到相应的段落,你可以这么写。
<a href="#question-one">Question One</a> <a href="#question-two">Question two</a>
还是到此为止吧,以上是手动添加锚链接的方式,下面就介绍一下如何利用jquery来为我们自动创建文章目录结构。
step 1: 首先我们先创建一个HTML变量
var ToC = "<nav role='navigation' class='table-of-contents'>" + "<h2>On this page:</h2>" + "<ul>";
Step 2: 接下来循环遍历段落小标题h3
$("article h3").each(function() { // loop });
Step 3: 接着获取小标题h3的标题内容和标题ID,也就是写文章的时候创建的标题ID
var el, title, link; $("article h3").each(function() { el = $(this); title = el.text(); link = "#" + el.attr("id"); });
Step 4: 创建一个目录结构然后把创建好的目录结构加到 article 元素里面
var newLine, el, title, link; $("article h3").each(function() { el = $(this); title = el.text(); link = "#" + el.attr("id"); newLine = "<li>" + "<a href='" + link + "'>" + title + "</a>" + "</li>"; ToC += newLine; });
Step 5: 闭合标签
ToC += "</ul>" + "</nav>";
Step 6: 把创建好的目录结构插入到html页面内,大公告成。
$("article").prepend(ToC);
总结:其实整个过程我们要做的就是利用js把文章中每个小段落的标题以及对应的ID都存储起来,接着将存储的数据利用js动态的创建出目录结构。
demo 演示
demo下载
相关文章推荐
- Maven项目目录结构与自动创建maven目录
- AutocJS – 为你的文章自动创建目录导航菜单
- Linux入职基础-7.9_自动创建Makefile入门(实战1:Flat目录结构)
- Linux入职基础-7.10_自动创建Makefile入门(实战2:deep目录结构实战)
- Linux入职基础-7.11_自动创建Makefile入门(实战3:shallow目录结构)
- mac系统下用zend framework 自动创建目录结构
- CMake Tips - 在Visual Studio中按目录结构自动创建Filters(Source Groups)
- maven目录结构自动创建(命令行)
- Gradle创建项目目录结构
- 黄聪:wordpress自动选择上一篇文章选择的分类目录
- 基于vue-cli创建的项目的目录结构及说明介绍
- 利用VS根据文件目录结构创建C++工程自己简单实现的方法
- eclipse创建web项目,让web项目自动更新到Tomcat下的webapps目录
- Android开发之应用程序创建与目录结构
- 【qtp脚本】实现自动创建目录并通过测试写字板生成指定个数的文件
- shell脚本使用ssh命令连接主机,自动创建目录,分发程序,执行命令
- 递归自动创建级联目录
- 工程linux下创建svn仓库目录结构
- maven3—自动创建目录骨架,maven中的坐标和仓库
- Java自动创建多层文件目录