Comment mettre en évidence dans le texte des citations et des références de fin de document après les relier dans une page

Question

je relie mes citations à mes notes et mes notes de fin à ma bibliographie de la manière suivante:

<h1>Title</h1> 
<hr /> 

<p>This is a citation where "[1]" links to "&uarr;" in Endnotes and vice-versa.<a id="citation1" href="#endnote1"><sup>[1]</sup></a></p> 

<h1>Endnotes</h1> 
<hr /> 

<ol> 
<li><a id="endnote1" href="#citation1">&uarr;</a>This is an endnote where this <a href="#Short title of reference"><i>Short title of reference</i></a> links to entire <i>reference</i> in Bibliography.</li> 
</ol> 

<h1>Bibliography</h1> 
<hr /> 

<ul> 
<li><a id="Short title of reference">Here goes the entire <i>reference</i>.</a></li> 
</ul> 

Ce qui donne:

Titre

---

C'est une citation où "[1]" liens vers "↑" dans les notes et vice-versa. ^[1]

Endnotes

---

1. ↑ C'est une note de fin où ce Titre abrégé de référence liens à toute référence dans Bibliographie.

Bibliographie

---

• va ici toute référence .

---

Maintenant, je veux l'élément [1], ↑ et à mettre en avant le Titre abrégé de liens de référence, quand le lien correspondant me prend à elle. Comment peut-on y parvenir?

Answer 1

Voici comment:

<h1>Title</h1> 
    <hr/> 

    <p>This is a citation.<sup><a id="citation_1" href="#endnote_1" onfocus="highlight(this)" onblur="deHighlight(this)">[1]</a></sup></p> 

    <h1>Endnotes</h1> 
    <hr/> 

    <ol> 
    <li><a id="endnote_1" href="#citation_1" onfocus="highlight(endnote_1Content)" onblur="deHighlight(endnote_1Content)">&uarr;</a><span id="endnote_1Content">This is an endnote citing this <abbr title="Full book title"><a href="#bibliography_1">Short title</a></abbr> for a book.</span></li> 
    </ol> 

    <h1>Bibliography</h1> 
    <hr /> 

    <ul> 
    <li><a id="bibliography_1" href="#" onfocus="highlight(bibliography_1Content)" onblur="deHighlight(bibliography_1Content)"></a><span id="bibliography_1Content">This is a reference for the entire book.</span></li> 
    </ul> 

    <script> 
    function highlight(x) { 
     x.style.background = "lightgrey"; 
    } 

    function deHighlight(x) { 
     x.style.background = ""; 
    } 
    </script>