HTML & CSS » li,ol内嵌层列表序号的实现

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

发表于: HTML & CSS. 评论 (1)
Sponsor

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

在线演示地址: DEMO

nested-ordered-lists

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

HTML代码

<ol>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List
<ol>
<li>List</li>
<li>List</li>
<li>List</li>
</ol>
</li>
<li>List</li>
<li>List</li>
</ol>

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('<span>' + level2 + '</span>');
});
});
}
});
在线演示地址: DEMO
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论One Response to “li,ol内嵌层列表序号的实现”

  1. admin - 回复

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


{ 发表评论 }