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

Question

我想复制维基百科的脚注突出显示，仅在 jQuery 和 CSS 类中单击文本引用。 I found a webpage that describes how to do so with CSS3然后是针对 IE 的 JavaScript 解决方案。不过，我想仅使用 jQuery 来完成此操作，因为我正在执行此操作的网站已经有一堆 jQuery 元素。

我已经列出了该过程的列表。

1. 点击了文本引用
2. 将 <p> 上的突出显示类替换为标准脚注类已经突出显示的脚注标签。
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 中工作)