Question

我的网页上有一个相对较大的术语表，这些术语表被组织为描述列表<dl>。

为了最小化工作示例，我们假设看起来像下面这样（除了它有50-100个条目）：

<dl class="glossary">

    <dt>Bobcat</dt>
    <dd>A medium-sized, furry mammal that can eat children.</dd>

    <dt>Cat</dt>
    <dd>A small, furry mammal that meows.</dd>

    <dt>Dog</dt>
    <dd>A small, furry mammal that barks.</dd>

    <dt>Fish</dt>
    <dd>A scaly aquatic animal that swims in water.</dd>

</dl>

我们假设所有字词都通过<dl>标记在<dt>区域内按字母顺序排列。

我想在屏幕顶部自动生成一系列ABC超链接（“A”，“B”，“C”，...，“Z”），跳转到第一个条目从那封信开始。如果有一种方法可以包含所有字母，则可以使用奖励积分，但如果是，那么样式字母会有所不同，如果不是对应于该字母的词汇表条目。

我想要的内容应该像以下网站一样非常粗略，每个页面顶部附近的字母快速链接将用户指向词汇表中的那些位置：http://www.g2conline.org/g2c/glossary/a/。一个关键的区别是，我希望快速链接指向同一页面上的锚点，而不是将词汇表划分为字母表中每个字母的单独页面，就像该网站一样。

Here's a JSFiddle结果的外观和行为。根据我上面的“奖励”要求，您可能会注意到我包含了CSS和一些类，以使某些链接看起来不同。我还添加了一些额外的HTML来生成链接。

我喜欢自动/动态地发生这样的事情 - 也许是通过JQuery脚本？我希望尽可能保持轻量级，避免使用HTML，PHP或Javascript / JQuery以外的编程语言。

谢谢！

Answer 1

我解决了，但需要一段时间。我最终在这个过程中学习了Javascript / JQuery！

以下是我所写的JSFiddle： http://jsfiddle.net/w7uo0q40/10/ 我添加了一些词汇表术语，以便您可以在单击它们时看到超链接实际执行某些操作。条目顶部的字母链接指向带有该字母的第一个条目，而顶部没有条目的字母看起来不同，不链接到任何内容。

这是附带的代码（从JSFiddle复制）：

<强>使用Javascript / JQuery的

var terms = $("dl.glossary dt").sort();

var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < letters.length; i++) {
    var nextChar = letters.charAt(i);

    // Need to find first of each letter
    var foundOne = -999;
    for (var j = 0; j < terms.length; j++) {
        var termj = terms[j].innerText;
        var termJJ = termj.toUpperCase();
        if (termJJ.charAt(0) == nextChar) {
            foundOne = j;
            break;
        }
    }

    // Create links and anchors based on whether something was found
    if (foundOne == -999) {

        // Create a new letterLink (with class "entriesAbsent")
        newLetterLink = "<span class=\"letterLinkSpan\"><a class=\"letterLink entriesAbsent\">" + nextChar + "</a></span>";

    } else {

        // Create a new letterLink (with class "entriesPresent")
        newLetterLink = "<span class=\"letterLinkSpan\"><a class=\"letterLink entriesPresent\" href=\"#" + nextChar + "\">" + nextChar + "</a></span>";

        // Create an anchor for the letterLink BEFORE the first glossary term starting with that letter
        $("<a class=\"letterAnchor\" name=\"" + nextChar + "\">").insertBefore(terms[foundOne]);

    }

    // Either way, add the letterLink to the list of letterLinks
    $("div#quicklinks").append(newLetterLink);
}

<强> HTML

<h2>Glossary:</h2>

<h3>Links:</h3> 
<div id="quicklinks"></div>

<h3>Entries:</h3> 
<dl class="glossary"> <a name="Bobcat">
    <dt>Bobcat</dt>
        <dd>A medium-sized, furry mammal that can eat children.</dd>
    <a name="Cat">
    <dt>Cat</dt>
        <dd>A small, furry mammal that meows.</dd>
    <a name="Dog">
    <dt>Dog</dt>
        <dd>A small, furry mammal that barks.</dd>
    <a name="Fish">
    <dt>Fish</dt>
        <dd>A scaly aquatic animal that swims in water.</dd>
    <a name="Flamingo">
    <dt>Flamingo</dt>
        <dd>A pink bird.</dd>
    <a name="Gnat">
    <dt>Gnat</dt>
        <dd>A small flying insect.</dd>
    <a name="Llama">
    <dt>Llama</dt>
        <dd>A shaggy-haired beast of burden with a long neck.</dd>
    <a name="Mouse">
    <dt>Mouse</dt>
        <dd>A tiny mammal.</dd>
    <a name="Quail">
    <dt>Quail</dt>
        <dd>A small bird.</dd>
    <a name="Rhino">
    <dt>Rhino</dt>
        <dd>A scaly mammal.</dd>
    <a name="Swan">
    <dt>Swan</dt>
        <dd>A white bird.</dd>
    <a name="Toucan">
    <dt>Toucan</dt>
        <dd>A colorful bird.</dd>
    <a name="Whale">
    <dt>Whale</dt>
        <dd>A huge aquatic mammal.</dd>
    <a name="Yak">
    <dt>Yak</dt>
        <dd>A shaggy-haired beast of burden.</dd>
    <a name="Zebra">
    <dt>Zebra</dt>
        <dd>Sort of a horse with white/black stripes.</dd>

</dl>

<强> CSS

span.letterLinkSpan {
    display: inline-block;
}
span.letterLinkSpan>a.letterLink {
    display: inline-block;
    width: 1.1em;
    text-align: center;
    padding: 0.2em;
    font-size: medium;
    color: #000000;
    background-color: #BBCCFF;
}

span.letterLinkSpan>a.letterLink.entriesPresent {
    font-weight: bold;
}
span.letterLinkSpan>a.letterLink.entriesAbsent {
    font-weight: normal;
    color: #FFEEEE;
}
span.letterLinkSpan>a.letterLink:hover {
    background-color: #DDDDFF;
}

这不是特别优雅的代码，但希望这会对某人有所帮助。干杯！

如何为<dl>词汇表自动生成一组按字母顺序排列的快速链接？</dl>

1 个答案: