Bagaimana untuk Nomborkan Senarai Tertib Bersarang dengan Pengiraan Berterusan dalam HTML?

Bilangan senarai tersusun bersarang dalam HTML

Anda mempunyai senarai tertib bersarang dan ingin menukar tahap kedua elemen bersarang Kaedah penomboran membolehkan ia mewarisi nombor dari lapisan sebelumnya dan terus mengira. Pada masa ini, elemen tahap kedua mula mengira semula pada 1, tetapi anda mahu ia dinomborkan dalam perpuluhan, seperti 2.1, 2.2 dan 2.3.

Masalah ini boleh diselesaikan dengan:

Penyelesaian CSS (semua pelayar moden)

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

CSS ini menggunakan mekanisme balas, Kekalkan nombor untuk setiap peringkat bersarang. Ia berfungsi dengan baik dalam semua pelayar moden.

Penyelesaian JQuery yang serasi dengan IE6/7

Untuk Internet Explorer 6/7, penyelesaian CSS Tulen tidak berfungsi. Oleh itu, mekanisme sandaran diperlukan:

<script>
  $(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') { // For IE6/7 only.
      $('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>');
        });
      });
    }
  });
</script>

Kod jQuery ini akan menambah nombor pada pelayar Internet Explorer 6/7. Ia memasukkan rentang sebelum elemen yang mengandungi nombor bersarang.

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