章节
问答
课签
笔记
评论
占位
占位

自定义对象级插件——lifocuscolor插件

自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:

$(Id).focusColor(color)

其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。

例如,在页面中,调用自定义的lifocuscolor插件,自定义<li>元素选中时的背景色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当<ul>元素调用focusColor()方法绑定自定义的插件之后,当鼠标在<li>元素间移动时,显示自定义的背景色。

任务

我来试试,亲自感受调用自定义插件改变<ul>元素中选中<li>选项的背景色。

在下列代码的第26行,调用自定义插件的focusColor()方法,设置<ul>元素中选中<li>选项时的背景色。

?不会了怎么办
  1. 首先,通过选择器获取<ul>元素,然后,调用该元素的focusColor()方法设置在<ul>元素中移动鼠标时,<li>元素选中时的背景色。
  2. focusColor()方法中的参数为背景色的颜色值。
||
1
<!DOCTYPE html
    PUBLIC "
    -//W3C//DTD
    XHTML 1.0
    Transitiona
    l//EN"
    "http://www
    .w3.org/TR
    /xhtml1/DTD
    /xhtml1
    -transition
    al.dtd">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
#divtest
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕梦前来
这个看看文档就会了

最赞回答 / 前端小菜鸟呀
我一看效果,也这么认为,伪元素还方便些

最新回答 / 末叶
我简单的说一下,因为现在慕课网的网址是  https://www.imooc.com/是 https: 开头的,我们的例子调用的是 http://www.imooc.com/data/jquery-1.8.2.min.js是 http开头的,在https的网页中使用 http联接,浏览器认为不安全,给屏蔽掉了不执行了本地运行默认是用http打开的,所以可以使用,可将例子上的 http改为https也可以在线运行了

最新回答 / 收获季节
http://www.jq22.com/ 我感觉这里的插件很多漂亮的,不知道有没有Bug?

最赞回答 / Jerps
回答问题之前,先看下插件的代码:<...code...>由此可见:遍历表项的时候是利用$('ul').find('li').each()方法来的。所以只需要获得ul,就可以利用事件转移快速高效给所有ul>li都加上这个效果!

最赞回答 / LittleDust
只是为了演示如何自定义插件,是一个简单的示例,并不是为了实际使用。

最新回答 / 收获季节
直接打开http://www.imooc.com/data/jquery.lifocuscolor.js链接,保存网页为.js格式,就可以用了
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言