Question

我有

的节目视图

<div><%= simple_format @chapter.body, id: "toc-container" %></div>

与一些JS

<script> 
  $headings = $("h2, h3");
  $.each($headings, function(index, value){
    $("#toc-container").append("<li>" + $(value).html() + "</li>");
  });
</script>

代码在chapter.body。

之上创建h2和h3标题的列表

如何使列表link_to锚定每个标题？

Answer 1

由于您使用jQuery生成TOC，您可以通过扩展您的JS来使用它来生成锚链接：

<script>
  $headings = $("h2, h3");
  $.each($headings, function(index, value){
    $(value).attr("id", index);
    $("#toc-container").append(
      "<li><a href=\"#" +
      index + "\">" + $(value).html() + "</a></li>"
    );
  });
</script>

<强> Working JSFiddle

link_to锚定JS目录

1 个答案: