communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jQuery 连续列表实现代码_jquery

jQuery 连续列表实现代码_jquery

WBOY
Libérer： 2016-05-16 18:38:45
original
1096 Les gens l'ont consulté

这个教程将告诉你如何运用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
    • Étiquettes associées：
    jquery
    source：php.cn
    Article précédent：利用jQuery的$.event.fix函数统一浏览器event事件处理_jquery Article suivant：javascript强制弹出新窗口实现代码_javascript技巧
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
    Depuis 2024-04-06 14:54:03
    0
    2
    421
    Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
    Depuis 2024-04-05 09:26:49
    0
    1
    1418
    Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
    Depuis 2024-04-04 18:40:04
    0
    1
    3528
    J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
    Depuis 2024-04-04 17:27:27
    0
    1
    417
    Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
    Depuis 2024-04-04 12:53:48
    0
    1
    303
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal