仅具有HTML/CSS的行内脚注(注内?) [英] In-line footnotes with only HTML/CSS (in-notes?)

问题描述

单击note标记时，FiveThirtyEight上的注释而不是在主要内容的下方或旁边，而是在该段落的内部或下方展开.代替脚注，它们可以称为脚注.

Rather than below or alongside the main content, notes on FiveThirtyEight expand within or below the paragraph when the note tag is clicked. Instead of footnotes they could be called in-notes.

我发现它们非常有效，并相信它们是我所见过的最适合Web的便笺系统.(当然，我并不是真的想要像Nate Silver这样的粉丝.)

I find them very efficient and believe they take are the most web-suited note system I have seen. (Of course, I don't really want to fanboy Nate Silver like that.)

我如何编码这些笔记?

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

I have looked around and I have seen some solutions using jquery or other languages, but it looks like 538 is only using HTML and CSS.

我相信我可以用< details> 修饰某些东西，但希望有更好的答案.我已经看过538上的源代码，但是不确定哪个代码是相关的.

I believe I could probably finagle something with <details> but expect there is a better answer. I've looked at the source-code on 538 but I'm not sure which code is relevant.

选择示例示例是因为其新颖性.点击第一个脚注.

Example article chosen because of its recency. Click the first footnote.

这可能是重复的，但我无知我相信不是.

This is maybe a duplicate but in my ignorance I believe it is not.

Elvislives回答说538确实使用了JavaScript.由于我缺乏对javascript的了解，我想我的问题变成了我可以仅使用HTML5进行内联注释吗?

Elvislives answered that 538 indeed uses javascript. With my lack of knowledge of javascript, my question, I suppose, then becomes, Can I make inline notes with only HTML5?

推荐答案

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

An HTML/CSS-only solution using hidden checkboxes:

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;}

这篇关于仅具有HTML/CSS的行内脚注(注内?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！