Toggle navigation
首页
头条
AI头条
科技资讯
互联网资讯
下载
博客
会员
中心
会员中心
发布资讯
发布博文
发布资源
首页
文章中心
JavaScript
js隔行变色、鼠标划过变色代码
281 阅读
0 评论
186 点赞
我是
靠谱客
的博主
动听老鼠
,这篇文章主要介绍
js隔行变色、鼠标划过变色代码
,现在分享给大家,希望可以做个参考。
<!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> <title>隔行变色且鼠标划过变色的效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .container ul{margin:0;padding:0;} .container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px;text-indent:1em;font-size:12px;} .container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px;text-indent:1em;font-size:12px;} .container .current{cursor:pointer;height:30px;width:200px;background-color:#F66;line-height:30px;text-indent:1em;font-size:12px;} </style> <script type="text/javascript"> window.onload = function() { changeColor('content'); changeColor('content2');//写上要控制的UL的ID,想控制几个就控制几个 changeColor('content3'); } function changeColor(id) { var arrayli = document.getElementById(id).getElementsByTagName('li'); var bool = true;//奇数行为true var oldStyle;//保存原有样式 for(var i = 0;i </head> <body> <span>第一个UL</span> <div class="container"> <ul id="content"> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> </ul> </div> <span>第二个UL</span> <div class="container"> <ul id="content2"> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> </ul> </div> <span>第三个UL</span> <div class="container"> <ul id="content3"> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> <li>隔行变色,划过变色</li> </ul> </div> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后
以上就是
动听老鼠
最近收集整理的关于
js隔行变色、鼠标划过变色代码
的全部内容,更多相关
js隔行变色、鼠标划过变色代码
内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(
186
)
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将本文分享至朋友圈。
本文分类:
JavaScript
浏览次数:
281
次浏览
发布日期:2022-04-09 07:32:03
本文链接:
https://www.kaopuke.com/article/k-p-k_14_u_7_o_26_fx_13_z_26_z.html
相关文章
Ai绘制一只可爱的蓝色章鱼头像
利用JQUERY实现多个AJAX请求等待的实例
python通过BF算法实现关键词匹配的方法
解析如何在PHP下载文件名中解决乱码的问题
js隔行变色、鼠标划过变色代码
FLASH基础教程:简单快速的创作优美的FLASH动画
windows7下双击jar文件运行的设置方法
基于ajax实现点击加载更多无刷新载入到本页
评论列表
共有
0
条评论
发表评论
取消回复
登录
注册新账号
立即
投稿
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将本文分享至朋友圈。
返回
顶部
发表评论 取消回复