js隔行变色、鼠标划过变色代码

</p> <p><title><a href="https://kunjuke.com/tag/2693/" title="隔行变色" target="_blank">隔行变色</a>且鼠标划过变色的效果</title> </p> <p>.container ul{margin:0;padding:0;}<br /> .container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px;text-indent:1em;font-size:12px;}<br /> .container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px;text-indent:1em;font-size:12px;}<br /> .container .current{cursor:pointer;height:30px;width:200px;background-color:#F66;line-height:30px;text-indent:1em;font-size:12px;} </p> <p>window.onload = function() {<br /> changeColor('content');<br /> changeColor('content2');//写上要控制的UL的ID，想控制几个就控制几个<br /> changeColor('content3');<br /> }<br /> function changeColor(id) {<br /> var arrayli = document.getElementById(id).getElementsByTagName('li');<br /> var bool = true;//奇数行为true<br /> var oldStyle;//保存原有样式<br /> for(var i = 0;i </p> <p><span>第一个UL</span> </p> <ul id="content"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> <p><span>第二个UL</span> </p> <ul id="content2"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> <p><span>第三个UL</span> </p> <ul id="content3"> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> <li>隔行变色，划过变色</li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• JS控制表格隔行变色
• js取模（求余数）隔行变色
• JS小功能(列表页面隔行变色)简单实现
• 原生JS操作网页给p元素添加onclick事件及表格隔行变色
• Table隔行变色的JavaScript代码
• javascript实现table表格隔行变色的方法
• 高效的表格行背景隔行变色及选定高亮的JS代码
• JS与jQuery实现隔行变色的方法
• JavaScript实现99乘法表及隔行变色实例代码
• 纯js实现隔行变色效果