首页 > 软件开发 > JQUERY >

如何使用CSS3和jquery方法控制无序列表间隔显示

来源:互联网 2023-03-17 00:47:03 版权归原作者所有,如有侵权,请联系我们

一般情况下,无序列表前面的小图标是一个实心圆,可以利用CSS3样式属性list-style-type控制图标样式;还可以使用jQuery方法控制无序列表项目的背景色间隔显示,操作如下:AAw办公区 - 实用经验教程分享!

如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

工具/原料

  • jQuery
  • CSS3
  • HTML5
  • HBuilderX
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,双击打开HBuilderX编辑器,新建一个默认的HTML5页面,如下图所示:AAw办公区 - 实用经验教程分享!

    如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

  • 2

    第二步,在body标签下方,插入一个div标签和无序列表,设置多个子项,如下图所示:AAw办公区 - 实用经验教程分享!

    如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

  • 3

    第三步,利用div ul元素选择器,设置子项前显示的图标,使用list-style-type属性,如下图所示:AAw办公区 - 实用经验教程分享!

    如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

  • 4

    第四步,保存代码并预览界面显示的效果,可以发现一个无序列表,子项前面是空心圆,如下图所示:AAw办公区 - 实用经验教程分享!

    如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

  • 4该信息未经许可获取自百度经验
  • 5

    第五步,引入jquery核心文件,并在初始化函数内编写代码,实现背景动态变化,如下图所示:AAw办公区 - 实用经验教程分享!

    如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

    如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

  • 6

    第六步,结果发现背景是一项一项全部变化,而不是一项变化其他不变;添加siblings方法设置子项兄弟节点背景,如下图所示:AAw办公区 - 实用经验教程分享!

    如何使用CSS3和jquery方法控制无序列表间隔显示AAw办公区 - 实用经验教程分享!

  • 注意事项

    • 注意如何使用CSS3属性设置无序列表项目前的图标
    • 注意如何利用jQuery方法设置无序列表项目定时间隔变色

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!AAw办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号