WonderCSS

利用jquery自动为网页文章创建目录结构

面对一篇很长的文章我们该如何更换的展现给读者,使其能更好的阅读文章了解文章的所传达的意思。这不仅使一个页面会获得更好的用户体验,同时在SEO方面也会的到帮助。显然,这种情况最好的做法就是为页面添加文章目录,似百度百科一样为文章划分段落、添加小标题。这样可以避免用户/浏览者会消耗查找段落的耐心及时间。

因此,在文章中创建一个文章目录结构,用户就可以快速的定位到相应的标题段落,而不需要来回的滚动查找段落内容。

article-table-of-contents

那么如何能实现这个“目录结构”呢?通晓一些 html 知识的人都会想到用锚链接来实现本页内位置跳转,如:


<a href="#question-one">跳转到位置一</a>

……

<h3 id="question-one">位置一</h3>

以上是手动添加锚链接的方式,下面就介绍一下如何利用 jquery 来为我们自动创建文章目录结构。

在页面中加载jquery库后再添加如下JS代码:


<script type="text/javascript">
$(document).ready(function(){
var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h2>页面目录:</h2>" +
    "<ul>";
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;
});
ToC +=
   "</ul>" +
  "</nav>";
$(".page-article").prepend(ToC);
});
</script>

受作用的 html 结构如下,首先我们要确定文章内容是包含在 <article> 标签内的 class 标签为 “page-article” 的容器中,在编辑文章中我们可以在预设的页面中,为标题添加 <h3> 标签即可。


<article>
    <div class="all-questions">
        <h3>目录一</h3>
        <p>本段落内容</p>
    </div>
</article>

同等的我们也需要一些 CSS 支持,用来定义这个目录窗口的位置、或悬浮方式。


.table-of-contents {
  float: right;
  width: 40%;
  background: #eee;
  font-size: 0.8em;
  padding: 1em 2em;
  margin: 0 0 0.5em 0.5em;
}

如此设置后在编辑文章时,我们只需可以稍加注意便可很顺利的完成“目录”性文章。将这一“低调奢华有内涵”的功能告诉编辑人员吧!

By 于湛 发布于 2013.11.8 12,558 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注