Heim > Web-Frontend > js-Tutorial > jQuery 连续列表实现代码_jquery

jQuery 连续列表实现代码_jquery

WBOY
Freigeben: 2016-05-16 18:38:45
Original
1097 Leute haben es durchsucht

这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。
可以先看看示例。
1a.添加jQuery代码
下载jQuery,在

标签之间如下添加jQuery代码:
复制代码 代码如下:




jQuery将如下输出html源码:
list-output-code 
1b.CSS编码
相应的运用背景图片样式化
  • 元素。(step1.png, step2.png, step3.png等等)。
    复制代码 代码如下:

    #step .item1 {
    background: url(step1.png) no-repeat;
    }
    #step .item2 {
    background: url(step2.png) no-repeat;
    }
    #step .item3 {
    background: url(step3.png) no-repeat;
    }

    step-list 
    2a.添加连续的内容
    你也可以运用这种技巧添加有序的内容,运用jQuery的prepend方法。下面就采用此种方法生成计数的留言列表。

    复制代码 代码如下:




    将为每个
  • 添加一个计数.
    commentlist-output-code 
    2b.CSS
    样式化
  • :position:relative 用position:absolute把.commentnumber放在留言条目的右上角。
    复制代码 代码如下:

    #commentlist li {
    position: relative;
    }
    #commentlist .commentnumber {
    position: absolute;
    right: 0;
    top: 8px;
    }

     2b.CSS
    样式化
  • :position:relative 用position:absolute把.commentnumber放在留言条目的右上角。
    复制代码 代码如下:

    #commentlist li {
      position: relative;
    }
    #commentlist .commentnumber {
      position: absolute;
      right: 0;
      top: 8px;
    }

    commentlist-counter
  • Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage