Creating table of contents in html

前端 未结 4 1525
囚心锁ツ
囚心锁ツ 2021-02-05 11:49

Is it possible to create an ordered list like the following? I like this for a table of contents I\'m creating.

  1. Into
  2. Section1
    2.1 SubSection1
    2.
相关标签:
4条回答
  • 2021-02-05 12:02

    There's quite a number of jQuery plugins to generate a table of contents.

    • Look at this one for starters

    • Another one here, with ordered lists

    0 讨论(0)
  • 2021-02-05 12:08

    This can indeed be done with pure CSS:

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

    Same example as a fiddle: http://jsfiddle.net/N79nP/

    0 讨论(0)
  • 2021-02-05 12:16

    Have you seen this post: Number nested ordered lists in HTML

    I don't think it can be done without using JS.

    0 讨论(0)
  • 2021-02-05 12:19

    This code leads to the desired output for me:

    <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;
    }
    

    Fiddle: http://jsfiddle.net/Lepetere/evm8wyj5/1/

    0 讨论(0)
提交回复
热议问题