li html 序号,li,ol内嵌层列表序号的实现

li,ol内嵌层列表序号的实现

8月 14, 2013

评论 (1)

Sponsor

什么是内嵌列表序号呢，这些序号像小说章节一样，比如小说的第三章的第2节，我们会用3.2来表示，这些列表序号在HTML一般使用li,ol来展示，但是如果内嵌多层就表现不够理想，这里我们写了一个jQuery来控制这个序号。

在线演示地址： DEMO

下面我们一起看看这个教程代码编写方法，制作前记得嵌入jQuery库。

HTML代码

1. List
2. List
3. List
4. List
   1. List
   2. List
   3. List
5. List
6. List

CSS代码

html>/**/body ol { /* Won't be interpreted by IE6/7. */

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;

}

ol li span { /* For IE6/7. */

margin: 0 5px 0 -25px;

}

jQuery代码

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

});

});

}

});

在线演示地址： DEMO

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

admin -

2014 年 03 月 14 日 下午 6:25

真不错哦，顺带给自己做个推广 我的博客 http://zhtml.cn .主题我自己捣鼓的。博客是技术代码类 ，新弄的 ，求友链 。求捧场！！！万事开头难，求大家多关照。 很明显我不是前段 ，页面很烂 。凑合看吧

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站