Bagaimana untuk Mencipta Senarai Tertib Bersarang dalam HTML dengan Penomboran Konsisten?

Senarai Tersusun Bersarang dalam HTML dengan Penomboran

Apabila membuat senarai tersusun bersarang dalam HTML, anda mungkin menghadapi isu di mana senarai dalaman mula menomborkan dari 1 lagi. Ini boleh mengganggu aliran senarai yang betul. Untuk menangani perkara ini, teknik CSS dan jQuery berikut boleh digunakan:

Pendekatan CSS

Untuk penyemak imbas yang menyokong penggayaan CSS, anda boleh menggunakan sifat set semula balas untuk menetapkan semula penomboran untuk setiap peringkat senarai. Sifat kenaikan balas menambah pembilang untuk setiap item senarai.

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 pelayar lama seperti IE6/7 yang tidak menyokong pembilang- set semula harta, anda boleh menggunakan jQuery untuk memasukkan penomboran secara manual. Kaedah ini melibatkan pendahuluan setiap item dengan elemen yang mengandungi nombor masing-masing.

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

Dengan melaksanakan salah satu daripada pendekatan ini, anda boleh mencapai senarai tersusun bersarang dengan penomboran yang konsisten, memberikan persembahan kandungan anda yang lebih teratur dan tersusun.

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