如何使用jQuery创建维基百科的脚注

我想在jQuery和CSS类中复制Wikipedia的脚注突出显示，只在文本引用中单击。然后是IE的JavaScript解决方案。不过，我希望只使用jQuery，因为我正在使用的站点已经有一堆jQuery元素

我列出了一个过程清单

在文本引用中单击 在已高亮显示的脚注标记上，用标准脚注类替换高亮显示类。 在适当的脚注中添加突出显示 使用jQuery向下滚动页面至适当的脚注。 到目前为止，我已经提出了一些jQuery，但我对它还非常陌生，目前主要依赖于教程和插件。下面是我用一些简单的英语为我还没有弄明白的部分所做的

$('.inlineCite').click(function() {
   $('.footnoteHighlight').removeClass('footnoteHighlight').addClass('footnote');
   //add highlight to id of highlightScroll
   //scroll to footnote with matching id
});

如果我有一个方法将选择器的一部分传递到函数中，并将其转换为变量，我相信我可以实现它。我相信你们中的一位大师很可能会做出一些让我认为我所做的任何事情都感到羞耻的事情。任何帮助都将不胜感激，因此提前感谢您

---

干杯。

我逐字复制了维基百科的上标标记：

<sup class="reference" id="cite_ref-1">
    <a href="#cite_note-1">
        <span>[</span>1<span>]</span>
    </a>
</sup>

关键是从单击的链接中抓取href，然后使用它选择元素并应用highlight类

此外，您不需要通过编程方式向下滚动页面，因为浏览器会自动为您处理此问题

下面是一个完整的工作示例：

更新：我注意到您在下面的评论中希望设置滚动动画，以下是您的操作方法：

$(".reference > a").click(function(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    var $el = $(href);

    $(".ref-highlight").removeClass("ref-highlight");
    $el.addClass("ref-highlight");
    $("html, body").animate({"scrollTop": $el.offset().top}, 3000);
});

注:

在本例中，我们使用event.preventDefault取消链接的默认操作，这将是跳转到id与单击链接的href匹配的元素。 使用平滑地将html元素向下滚动到适当的位置，该位置由目标元素上的使用确定。 我指定的duration参数3000是用来延长/缩短滚动持续时间的参数。

---

这里有一个这样的例子：在IE8/Chrome/FF 3中更新工作这里有一个更好的主意-使用散列链接进行链接，然后使用jQuery对其进行增强。在HTML中：

<p>Here's some content <sup><a href="#footnote-1">[1]</a></sup></p>

<ul id="footnotes">
   <li id="footnote-1">Sources: a, b and c</li>
</ul>

我们应用了一些JavaScript逻辑：

// Select all #hash links
$('a[href^=#]').click(function(){
    $('#footnotes li').removeClass('highlight')
        .filter(this.href).addClass('highlight');
});

如果要检查用户是否正在导航到哈希URL，可以使用location.hash执行此操作：

if(location.hash) $(location.hash).addClass('highlight');

---

也许更好的方法是打开带有参考细节的工具提示，而不是上下跳跃。简单而简洁的插件位于：除了阅读用户定义的引用，它还可以从给定的ISBN或PubMed ID自动检索出版物详细信息。

不再需要使用jQuery进行此操作；CSS3:target伪类现在以纯CSS的方式完成这项工作

---

参考资料：

CSS确实应该为当前活动的锚片段设置一个选择器。这种类型的功能不需要JS。@Lèse:有一个CSS3选择器可以实现这一点，IE不支持它：啊，我想我应该更好地阅读这个问题。好吧，希望IE最终会支持它。这个看起来不错，我明天会试试。我想使用jQuery向下滑动的原因是为了动画幻灯片，而不是标准的浏览器行为。我刚刚又开始着手这个项目。到目前为止，应用的脚本不起作用。

// Select all #hash links
$('a[href^=#]').click(function(){
    $('#footnotes li').removeClass('highlight')
        .filter(this.href).addClass('highlight');
});

if(location.hash) $(location.hash).addClass('highlight');