jQuery 实现连续列表效果

发布时间：2018-08-19 14:34:43 所属栏目：传媒来源：站长网

导读：副标题#e# 你有没有手工的编写过一些重复的代码？你也觉得它们是如此的无聊吧。好了，这里有更好的解决办法。这个教程将告诉你如何运用 jQuery 添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。

副标题[/!--empirenews.page--]

你有没有手工的编写过一些重复的代码？你也觉得它们是如此的无聊吧。好了，这里有更好的解决办法。这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。

可以先看看示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#step li").each(function (i) { i = i+1; $(this).addClass("item"+i); }); $("#number li").each(function (i) { i = i+1; $(this).addClass("item"+i); }); $("#commentlist li").each(function (i) { i = i+1; $(this).prepend('<span class="commentnumber"> #'+i+'</span>'); }); }); </script> <title>jQuery 实现连续列表效果 - Liehuo.net</title> <style type="text/css"> body { width: 500px; margin: 20px auto; color: #999; font: 90%/150% Arial, Helvetica, sans-serif; } * { margin: 0; padding: 0; } a { color: #333; } /* step style */ #step { margin: 10px 0 40px; padding: 0; } #step li { padding: 3px 0 6px 110px; margin: 0 0 20px; list-style: none; } #step h3 { font: bold 200%/100% Arial, Helvetica, sans-serif; margin: 0 0 5px; color: #666; } #step .item1 { background: url(http://www.veryhuo.com/uploads/allimg/091220/step1.png) no-repeat; } #step .item2 { background: url(http://www.veryhuo.com/uploads/allimg/091220/step2.png) no-repeat; } #step .item3 { background: url(http://www.veryhuo.com/uploads/allimg/091220/step3.png) no-repeat; } #step .item4 { background: url(http://www.veryhuo.com/uploads/allimg/091220/step4.png) no-repeat; } /* number style */ #number { margin: 10px 0 40px; padding: 0; } #number li { padding: 3px 0 6px 55px; margin: 0 0 20px; list-style: none; } #number h3 { font: bold 170%/110% Arial, Helvetica, sans-serif; margin: 3px 0 5px; color: #666; } #number .item1 { background: url(http://www.veryhuo.com/uploads/allimg/091220/number1.png) no-repeat; } #number .item2 { background: url(http://www.veryhuo.com/uploads/allimg/091220/number2.png) no-repeat; } #number .item3 { background: url(http://www.veryhuo.com/uploads/allimg/091220/number3.png) no-repeat; } /* number style */ #commentlist { margin: 10px 0 40px; padding: 0; } #commentlist li { padding: 10px 0 20px; list-style: none; border-top: solid 1px #ccc; position: relative; } #commentlist cite { font: bold 140%/110% Arial, Helvetica, sans-serif; color: #666; } #commentlist .time { color: #ccc; margin: 0 0 10px; } #commentlist .commentnumber { position: absolute; right: 0; top: 8px; font: normal 200%/100% Georgia, "Times New Roman", Times, serif; color: #ccc; } </style> </head> <body> <ol id="step"> <li> <h3>开始</h3> <p>你有没有手工的编写过一些重复的代码？你也觉得它们是如此的无聊吧。好了，这里有更好的解决办法。这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。 </p> </li> <li> <h3>jQuery</h3> <p>下载jQuery，在<head>标签之间如下添加jQuery代码 </p> </li> <li> <h3>CSS 样式</h3> <p>相应的运用背景图片样式化<li>元素。(step1.png, step2.png, step3.png等等）。</p> </li> <li> <h3>最后</h3> <p>你也可以运用这种技巧添加有序的内容，运用jQuery的prepend方法。下面就采用此种方法生成计数的留言列表。</p> </li> </ol> <ol id="number"> <li> <h3>烈火学院</h3> <p>烈火网主要有网页设计、WEB开发、网站运营与互联网新闻等内容，为个人网站的发展提供网页素材模板与学习教程，是草根站长、程序员、网页设计师等交流与学习的IT类网站。</p> </li> <li> <h3>烈火论坛</h3> <p>主要致力于软件编程与开发,产品有：LieHuoWMS、烈火QQ、烈火系列软件，同时有电脑、手机、建站、数码、娱乐、各类破解软件与注册机等交流,烈火论坛 LieHuoBBS - 烈火软件官方论坛，菜鸟级IT技术交流社区!</p> </li> <li> <h3>站长工具</h3> <p>网站管理员工具提供站长查询,是为广大中文建站提供的SEO搜索引擎优化站长工具，同时有<b>IP查询</b>、手机查询等多种实用工具,烈火网为网站设计、开发与运营提供动力！</p> </li> </ol> <ol id="commentlist"> <li> <p><cite>烈火网友:</cite></p> <p class="time">10:59 2009-12-20</p> <p>非常不错，我是一个网页爱好者，同时是一名站长，经常到烈火网来学习！</p> </li> <li> <p><cite>烈火网友:</cite></p> <p class="time">11:00 2009-12-20</p> <p>烈火真的很不错，我会永远支持烈火的发展！</p> </li> <li> <p><cite>烈火网友:</cite></p> <p class="time">11:00 2009-12-20</p> <p>每一分劳动都会有收获，让我们一起营造良好的学习和交流环境！</p> </li> </ol> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

1a.添加jQuery代码

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/3

尾页