如何创建仅用jQuery突出显示的Wikipedia脚注

Question

我想复制Wikipedia的脚注，突出显示了仅在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将animate元素平滑向下滚动到适当的位置，该位置由目标元素上的html确定。
• offset()参数（我指定为3000）是您要调整以延长/缩短滚动持续时间的东西。

这里是一个例子：offset() （已更新为在IE8 / Chrome / FF 3中工作）>

Answer 2

这是一个更好的主意-使用duration链接进行链接，然后使用jQuery进行增强。在您的HTML中：

Answer 3

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

Answer 4

不再需要为此使用jQuery； CSS3 if(location.hash) $(location.hash).addClass('highlight'); 伪类现在以纯CSS方式完成此操作。