0

我有三个具有唯一 ID 的不同锚链接，我想为同一页面上的其他一些链接添加脚注。但我面临的问题是，所有三个锚链接的返回脚注都是相同的。

<sup><a href="#one">One&nbsp;&Dagger;</a></sup><br/>
<sup><a href="#two">Two&nbsp;&Dagger;</a></sup><br/>
<sup><a href="#three">Three&nbsp;&Dagger;</a></sup>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/><br/><br/><br/><br/><br/>
  <a href="#" id="one">&#x21B5;Back to footnote</a>

我如何分别回到脚注参考上述锚点，如“一”、“二”、“三”。

任何帮助将不胜感激......谢谢！

4

1 回答 1

1

如果我正确理解了您的问题，您希望链接转到“返回脚注”链接，然后您希望“返回脚注”链接返回您单击的链接。如果我对您问题的解释有误，请发表评论，我会进行调整。

基本上，我为每个链接添加了一个事件侦听器，当您单击它时，会将“返回脚注”href 更改为正确的锚点：

var $anchors = document.getElementsByClassName('anchor');
var $footnote = document.getElementById('footnote');

for (var i = 0; i < $anchors.length; i++) {
  var $anchor = $anchors[i];
  
  $anchor.addEventListener('click', function () {
    $footnote.href = '#' + this.id;
  });
}
<sup><a id="one" class="anchor" href="#footnote">One&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="two" class="anchor" href="#footnote">Two&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="three" class="anchor" href="#footnote">Three&nbsp;&Dagger;</a></sup>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" id="footnote">&#x21B5;Back to footnote</a>

jQuery

$('.anchor').click(function() {
  $('#footnote').attr('href', '#' + this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<sup><a id="one" class="anchor" href="#footnote">One&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="two" class="anchor" href="#footnote">Two&nbsp;&Dagger;</a></sup>
<br><br><br>
<sup><a id="three" class="anchor" href="#footnote">Three&nbsp;&Dagger;</a></sup>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" id="footnote">&#x21B5;Back to footnote</a>

于 2017-01-25T13:33:29.847 回答