如何仅使用 jQuery 创建维基百科的脚注突出显示

Question

我想复制维基百科的脚注突出显示，仅在 jQuery 和 CSS 类中单击文本引用。 我找到了一个网页，描述了如何使用 CSS3 执行此操作，然后IE 的 JavaScript 解决方案。然而，我想仅使用 jQuery 来实现这一点，因为我正在执行此操作的网站已经有一堆 jQuery 元素。

我已经列出了该过程的清单。

1. 单击文本内引文
2. 将已突出显示的脚注的

   标记上的突出显示类替换为标准脚注类。

3. 向适当的脚注添加突出显示
4. 使用 jQuery 将页面向下滚动到适当的脚注。

到目前为止，我已经想出了一些 jQuery，但我对它非常陌生，到目前为止，我严重依赖教程和插件。这是我用一些简单的英语来表达我还没有弄清楚的部分。

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

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

干杯。

Answer 1

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

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

并使用了以下 jQuery：

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

    $(".ref-highlight").removeClass("ref-highlight");
    $el.addClass("ref-highlight");
});

关键是从单击的链接中获取 href ，然后使用它来选择元素并应用突出显示类。

此外，您不需要以编程方式向下滚动页面，因为浏览器会自动为您处理此操作。

这是一个完整的工作示例： http://jsfiddle.net/andrewwhitaker/dkWJm/2/

---

更新：我在下面的评论中注意到您想要设置滚动动画，具体操作方法如下：

$(".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 匹配的元素。
• 使用 animate 平滑滚动 html 元素下降到适当的位置，这是使用 offset() 确定的目标元素。
• duration 参数（我指定为 3000）是您可以调整以延长/缩短滚动持续时间的参数。

这是一个示例： http://jsfiddle.net/andrewwhitaker/dkWJm/4/ （已更新以在 IE8/Chrome/FF 3 中工作）

Answer 2

这里有一个更好的主意 - 使用 #hash 链接进行链接，然后使用 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，滚动都可以正常工作，并且如果用户选择通过添加书签或将其复制到其他位置来保存链接，您的页面仍将按预期工作。

现在我们定义一个简单的CSS类来突出显示选定的脚注：

.highlight {
    background: #ddd;
}

并且我们应用一些JavaScript逻辑：

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

如果您想检查用户是否导航到#hash URL，您可以使用location .hash 来做到这一点：

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

Answer 3

为此不再需要使用 jQuery； CSS3 :target 伪类现在以纯 CSS 方式执行此操作。

Codepen 链接

参考：如何使用 CSS3 动态突出显示维基百科等内容

Answer 4

也许更好的方法是打开包含参考详细信息的工具提示，而不是上下跳跃。简单而简洁的插件位于： http://livereference.org 除了读取用户定义的参考之外，它还可以自动检索出版物详细信息来自给定的 ISBN 或 PubMed ID。