Use Javascript and CSS to achieve footnote effect_javascript skills

However, since footnotes have these benefits, of course we must also take advantage of them in web pages. This article introduces you to how to achieve footnote effects using Javascript and CSS.

Copy code The code is as follows:

To implement footnotes, we need The following elements:

Copy code The code is as follows:

CSS CSS is the abbreviation of Cascading Style Sheet. Translated as "Cascading Style Sheets". Is a markup language used for (enhanced) control over web page styles and allows the separation of style information from web page content.

where:
article1 is the main body of the article you need to footnote
.. is the annotation content, and both span and class tags can be configured.
artnotes1 is where footnotes are displayed
Calling according to the default settings:

Copy the code The code is as follows:

Test code: Save and run the code below.

Copy code The code is as follows:

    

用 Javascript 和 CSS 实现脚注（Footnote）效果

    

    

    

Article 1

    

在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数函数是将唯一的输出值赋予每一输入的『法则』(Wikipedia)。或者一个验证邮件地址的正则表达式正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。，又或者一个简单的文件上传类，甚至一个效果不错的CSSCSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。
    

    

本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。
    

    

    

;

Article 2

In the process of programming, we usually accumulate Many small pieces of code that are simple, effective, and reusable, a simple string processing functionThe function is a "law" that assigns a unique output value to each input (Wikipedia). Or a regular expression for verifying email addressesRegular Expression (Regular Expression) describes a string matching pattern that can be used to check whether a string contains a certain Seed string, replace the matching substring or remove the substring that meets a certain condition from a certain string, etc. , or a simple file upload class, or even a good CSSCSS is the abbreviation of Cascading Style Sheet. Translated as "Cascading Style Sheets". Is a markup language used for (enhanced) control over web page styles and allows the separation of style information from web page content. Navigation style. These little tricks save us a lot of time, but as time goes by, the number of codes increases, and it takes a lot of time to find them. Therefore, this website is committed to collecting and sorting out some similar little knowledge, and working hard to improve the quality of article search. Firstly, it is convenient for everyone to check, and secondly, it can be regarded as supporting the open source cause.

Among the codes and tutorials collected on this site, there are functions and classes extracted from world-famous open source software The definition of an object. It contains information about how the object behaves, including its name, methods, properties, and events. , there are also original or translated wonderful articles submitted by netizens. The standards for including codes on this site are: simple, exciting, and universal.

/div>

Back to "Use Javascript and CSS to achieve footnote effect"

 

;

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn