Question

我有三个不同的具有唯一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>

如何回到脚注参考上面的锚点，例如＆＃34;一个＆＃34;，＆＃34;两个＆＃34;，＆＃34;三个＆＃34;分别

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

Answer 1

如果我正确理解了您的问题，您希望链接转到＆＃34;返回脚注＆＃34;链接，然后你想要＆＃34;回到脚注＆＃34;链接返回您点击的链接。如果我对您的问题的解释有误，请做出评论并进行调整。

基本上，我已经为每个链接添加了一个事件监听器，当你点击它时会改变＆＃34;返回脚注＆＃34; href到正确的锚：

＆＃13;

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

＆＃13;

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

＆＃13;

的jQuery

＆＃13;

$('.anchor').click(function() {
  $('#footnote').attr('href', '#' + this.id);
});

＆＃13;

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

＆＃13;

如何使用JavaScript返回不同锚元素的脚注？

1 个答案: