[Javascript] En-têtes de numérotation automatique HTML / CSS?



Answers

Certainement possible en utilisant les compteurs css - assurez-vous juste de faire attention à la compatibilité du navigateur ...:

Cela fera h2 obtenir 1., 2., h3 obtient 1.1, 2.1, 2.2 etc ...

<style>
   body{counter-reset: section}
   h2{counter-reset: sub-section}
   h3{counter-reset: composite}
   h4{counter-reset: detail}

   h2:before{
     counter-increment: section;
     content: counter(section) " ";
   }
   h3:before{
     counter-increment: sub-section;
     content: counter(section) "." counter(sub-section) " ";
   }
   h4:before{
     counter-increment: composite;
     content: counter(section) "." counter(sub-section) "." counter(composite) " ";
   }
   h5:before{
     counter-increment: detail;
     content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
   }
   </style>

Comme le dit lpfavreau, c'est la même chose qu'une autre question que je crois.

Notez également que l'utilisation de css ne changera pas le titre (par exemple, le texte sélectionné vous donnera le titre sans les chiffres). Cela peut ou non être souhaitable. La réponse (acceptée) de lpfavreau vous donnera le code jquery pour modifier le texte de l'en-tête.

3ème partie Modifier

J'ai créé un exemple avec le css ci-dessus

Question

Existe-t-il un moyen (idéalement facile) de faire des en-têtes et des sections autonumber en HTML / CSS? Peut-être une bibliothèque JS?

Ou est-ce quelque chose qui est difficile à faire en HTML?

Je regarde une application pour un wiki d'entreprise, mais nous voulons être en mesure d'utiliser des numéros de titres comme nous l'avons toujours dans les traitements de texte.




<ol>
  <li>Heading 1</li>
  <li>Heading 2</li>
  <li>Heading 3</li>
</ol>



Pourrait éventuellement être fait soit côté serveur ou avec JavaScript. Je ne sais pas à propos des scripts premade qui le fait bien.

Impossible de faire avec HTML / CSS, au moins - sauf si vous ajoutez manuellement tous les numéros dans vos en-têtes.




Links