首頁 > web前端 > css教學 > 如何在HTML中實現嵌套有序列表的連續編號?

如何在HTML中實現嵌套有序列表的連續編號?

Linda Hamilton
發布: 2024-11-29 22:13:12
原創
204 人瀏覽過

How to Achieve Continuous Numbering in Nested Ordered Lists in HTML?

在HTML 中對巢狀有序列表進行編號

在HTML 中建立巢狀有序列表時,巢狀元素通常會從1 開始重新編號。要實現連續編號,請執行以下操作這些步驟:

CSS 方法(對於現代瀏覽器)

  1. 在 中在HTML 部分,新增以下樣式:
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;
}
登入後複製

jQuery Approach (for IE6/7)

  1. 將jQuery 庫包含在部分:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
登入後複製
  1. 將以下腳本加入 的末端部分:
$(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>');
            });
        });
    }
});
登入後複製

以上是如何在HTML中實現嵌套有序列表的連續編號?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板