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

Question

我想复制维基百科的脚注突出显示来自文本引文,单击jQuery和CSS类.我发现了一个网页,描述了如何使用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中工作)