【问题标题】:jQuery table of contents plugin that uses anchor names使用锚名称的 jQuery 目录插件
【发布时间】:2014-07-26 02:35:59
【问题描述】:

我正在寻找一个使用给定锚名称的 jQuery 目录插件。我发现的那些总是生成它们自己的锚名称,导致不稳定的 URI,如somewhere#toc_1_4。但是对于这样的主播

<h2><a name="something-special">Something Special</a></h2>

我想要一个像 somewhere#something-special 这样的 URI。

有这样的插件吗?

【问题讨论】:

标签: javascript jquery tableofcontents


【解决方案1】:

我不知道这样的插件,但这可以自己轻松完成:

$('a[name]').each(function(i, v) {
    var e = $(v);
    if (e.text() != '') {
        $('#toc').append('<li><a href="#' + e.attr('name') + '">' + e.text() + '</a></li>');
    }
});

对于每个链接,将一个列表项附加到您的#toc(可以是有序列表):

<h1>Table of contents:</h1>
<ol id="toc"></ol>

您还可以添加类似的内容:

<a name="something-special" data-toc="yes" data-title="Special topic">special</a>

并使用代码:

$('a[name]').each(function(i, v) {
    var e = $(v);
    var t = e.data('title') || e.text();
    if (e.data('toc') == 'yes' && t.length > 0) {
        $('#toc').append('<li><a href="#' + e.attr('name') + '">' + t + '</a></li>');
    }
});

这是给你的 jsfiddle:http://jsfiddle.net/27Ubt/1/

【讨论】:

  • 你可以用$('a')代替$('a[name]')
  • 你应该用var声明et,以免污染全局命名空间。
【解决方案2】:

考虑这个插件:

希望对你有帮助。

【讨论】:

    猜你喜欢
    • 2017-03-18
    • 1970-01-01
    • 2013-10-07
    • 2022-09-30
    • 1970-01-01
    • 2020-04-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多