jQuery 实现持续列表结果

发布时间：2018-08-20 13:51:12 所属栏目：业界来源：站长网

导读：你有没有手工的编写过一些一再的代码？你也认为它们是云云的无聊吧。好了，这里有更好的办理步伐。这个教程将汇报你怎样运用 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代码

（编辑：河北网）

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

1/3

尾页

全新iPad Pro已在途中	RGB三色光源直接成像！
零下30℃开启中国中车	首发价 1199 元，小米