Creating table of contents in html

问题:

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.2 SubSection2
   
3. Section2
   .....

I have the following but each subsection restarts from 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>

Thanks

回答1:

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/

回答2:

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

回答3:

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

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