5

当点击注释标签时，FiveThirtyEight 上的注释不是在主要内容下方或旁边，而是在段落内部或下方展开。除了脚注，它们可以称为in-notes。

我发现它们非常高效，并且相信它们是我见过的最适合网络的笔记系统。（当然，我真的不想那样迷恋 Nate Silver。）

我如何编码这些笔记？

我环顾四周，看到了一些使用 jquery 或其他语言的解决方案，但看起来 538 只使用 HTML 和 CSS。

我相信我可能会解决一些问题，<details>但希望有更好的答案。我查看了 538 上的源代码，但我不确定哪个代码是相关的。

选择的示例文章是因为它的新近。单击第一个脚注。

这可能是重复的，但在我的无知中，我相信它不是。

编辑： Elvislives 回答说 538 确实使用了 javascript。由于我对javascript缺乏了解，我想我的问题是，我可以只用HTML5做内联笔记吗？

4

2 回答 2

3

538 使用 javascript 来实现脚注显示/隐藏功能。脚注文本在页面加载时具有 css display:none，当单击脚注时，javascript 将 css 更改为脚注上的 display:block。

这是一个 jsbin 示例：http ://jsbin.com/vewibexedu/edit?html,css,js,output

编辑：响应您关于如何仅使用 html/css 执行此操作的编辑请求，您可以使用 css 焦点来切换显示块和不显示。仅使用 css 的脚注关闭功能比使用 js 的要复杂一些。我在这里实现了一个示例，其中关闭按钮位于脚注的末尾，而不是像 538 那样替换脚注编号 - 这是一个仅 css 的解决方法。 http://jsbin.com/cexeeyegodo/edit?html,css,输出

于 2016-10-31T05:11:05.730 回答
3

使用隐藏复选框的纯 HTML/CSS 解决方案：

HTML

<p>
  This is my text. I make a claim that needs a citation.
  <input type="checkbox" id="cb1" /><label for="cb1"><sup>1</sup></label>
  <span><br><br> This is the citation.<br><br></span>
  Continued text.
</p>

CSS

input[type=checkbox] ~ span {display:none;}
input[type=checkbox]:checked ~ span {display:inline;}
input[type=checkbox] {display:none;}
于 2016-11-02T22:58:09.590 回答