Comment obtenir une numérotation continue dans des listes ordonnées imbriquées en HTML ?

Numérotation des listes ordonnées imbriquées en HTML

Lors de la création de listes ordonnées imbriquées en HTML, il est courant que les éléments imbriqués redémarrent la numérotation à partir de 1. Pour obtenir une numérotation continue, suivez ces étapes :

Approche CSS (pour les navigateurs)

1. Dans la zone de votre HTML, ajoutez le style suivant :

html>/**/body ol {
    list-style-type: none;
    counter-reset: level1;
}

ol li:before {
    content: counter(level1) ". ";
    counter-increment: level1;
}

ol li ol {
    list-style-type: none;
    counter-reset: level2;
}

ol li ol li:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;
}

Approche jQuery (pour IE6/7)

1. Inclure la bibliothèque jQuery dans la section :

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Ajoutez le script suivant à la fin de la section rubrique :

$(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') { 
        $('ol ol').each(function(i, ol) {
            ol = $(ol);
            var level1 = ol.closest('li').index() + 1;
            ol.children('li').each(function(i, li) {
                li = $(li);
                var level2 = level1 + '.' + (li.index() + 1);
                li.prepend('<span>' + level2 + '</span>');
            });
        });
    }
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!