19

是否可以创建如下所示的有序列表？对于我正在创建的目录，我喜欢这个。

  1. 进入
  2. 第 1节
    2.1 子节 1
    2.2 子节2
  3. 第 2 节
    .....

我有以下内容，但每个小节都从 1 重新开始。

<ol>
    <li>
        <a href="#Lnk"></a>
    </li>
    <li>
        <a href="#Lnk"></a>
    </li>
    <ol>
        <li>
            <a href="#Lnk"></a>
        </li>
        <li>
            <a href="#Lnk"></a>
        </li>
    </ol>
</ol>

谢谢

4

5 回答 5

17

这确实可以用纯 CSS 来完成：

ol {
    counter-reset: item;
}

li {
    display: block;
}

li:before {
    content: counters(item, ".")" ";
    counter-increment: item;
}

与fiddle相同的示例。

于 2014-02-10T17:30:32.823 回答
4

有很多 jQuery 插件可以生成目录。

于 2013-01-03T12:01:25.687 回答
1

你看过这篇文章吗： HTML 中的数字嵌套有序列表

我认为不使用 JS 是无法做到的。

于 2013-01-03T12:01:15.143 回答
0

这段代码会导致我想要的输出：

<ol>
  <li>
    <a href="#Lnk">foo</a>
  </li>
  <li>
    <a href="#Lnk">bar</a>
    <ol>
      <li>
        <a href="#Lnk">baz</a>
      </li>
      <li>
        <a href="#Lnk">qux</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="#Lnk">alpha</a>
    <ol>
      <li>
        <a href="#Lnk">beta</a>
      </li>
      <li>
        <a href="#Lnk">gamma</a>
      </li>
    </ol>
  </li>
</ol>

CSS：

ol {
    counter-reset: item;
}
li {
    display: block;
}
li::before {
    content: counters(item, ".")". ";
    counter-increment: item;
}

小提琴：http: //jsfiddle.net/Lepetere/evm8wyj5/1/

于 2020-08-20T08:53:18.823 回答
0

就我自己而言，我对现有的解决方案并不满意。所以我用Python3and创建了一个解决方案BeautifulSoup。

该函数将 HTML 源代码作为字符串并查找标题标签（例如h1）。在接下来的步骤id=中，为标题和相应的目录条目创建一个。

def generate_toc(html_out):
    """Create a table of content based on the header tags.
    
    The header tags are used to create and link the toc.
    The toc as place on top of the html output.
    
    Args:
        html_out(string): A string containing the html source.

    Returns:
        (string): The new string.
    """
    from bs4 import BeautifulSoup

    # the parser
    soup = BeautifulSoup(html_out, 'html.parser')

    # create and place the div element containing the toc
    toc_container = soup.new_tag('div', id='toc_container')
    first_body_child = soup.body.find_all(recursive=False)[0]
    first_body_child.insert_before(toc_container)
    # toc headline
    t = soup.new_tag('p', attrs={'class': 'toc_title'})
    t.string = 'Inhalt'
    toc_container.append(t)

    def _sub_create_anchor(h_tag):
        """Create a toc entry based on a header-tag.
        The result is a li-tag containing an a-tag.
        """
        # Create anchor
        anchor = uuid.uuid4()
        h_tag.attrs['id'] = anchor  # anchor to headline
        # toc entry for that anchor
        a = soup.new_tag('a', href=f'#{anchor}')      
        a.string = h_tag.string
        # add to toc
        li = soup.new_tag('li')
        li.append(a)
        return li

    # main ul-tag for the first level of the toc
    ul_tag = soup.new_tag('ul', attrs={'class': 'toc_list'})
    toc_container.append(ul_tag)

    # helper variables
    curr_level = 1
    ul_parents = [ul_tag]

    # header tags to look for
    h_tags_to_find = [f'h{i}' for i in range(1, 7)]  # 'h1' - 'h6'
    for header in soup.find_all(h_tags_to_find):
        next_level = int(header.name[1:])

        if curr_level < next_level:  # going downstairs
            # create sub ul-tag
            sub_ul_tag = soup.new_tag('ul', attrs={'class': 'toc_list'})
            # connect it with parent ul-tag
            ul_parents[-1].append(sub_ul_tag)
            # remember the sub-ul-tag
            ul_parents.append(sub_ul_tag)
        elif curr_level > next_level:  # going upstairs
            # go back to parent ul-tag
            ul_parents = ul_parents[:-1]

        curr_level = next_level

        # toc-entry as li-a-tag
        li_tag = _sub_create_anchor(header)
        # add to last ul-tag
        ul_parents[-1].append(li_tag)

    return soup.prettify(formatter='html5')

在您的所有用例中，这可能并不优雅。我自己将 TOC 放在由数据科学例程（例如 pandas）生成的 HTML 报告之上。

于 2021-06-23T10:17:19.120 回答