Bagaimana untuk Mencapai Penomboran Berterusan dalam Senarai Tertib Bersarang dalam HTML?

Menomborkan Senarai Tersusun Bersarang dalam HTML

Apabila mencipta senarai tersusun bersarang dalam HTML, adalah perkara biasa bagi elemen bersarang untuk memulakan semula penomboran dari 1. Untuk mencapai penomboran berterusan, ikuti langkah berikut:

Pendekatan CSS (untuk moden pelayar)

1. Dalam bahagian HTML anda, tambah gaya berikut:

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

Pendekatan jQuery (untuk IE6/7)

1. Sertakan perpustakaan jQuery dalam bahagian:

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

2. Tambahkan skrip berikut pada penghujung bahagian:

$(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>');
            });
        });
    }
});

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penomboran Berterusan dalam Senarai Tertib Bersarang dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!