js 隔行变色的最简单代码

发布时间:2020-11-11编辑:脚本学堂
本文分享一段js代码,用最简单的奇偶计算来实现隔行变色,适用于表格、div、ul、ol等标签。有需要的朋友,可以作个参考。

js实现隔行变色的效果,类似table,ul,ol等。
1,html部分

<ul class="colorEven">
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
  <li>第四列</li>
  <li>第五列</li>
  <li>第六列</li>
</ul>

2,css样式

/*======== 隔行变色样式 ========*/
ul.colorEven{ width:500px; zoom:1; overflow:hidden;}
ul.colorEven li{ padding:5px 0px; color:#333;}
ul.colorEven li.even{ background:#FF6;}
ul.colorEven li.odd{ background:#6F3;}
ul.colorEven li.ovbeg{ background:#CFF;}

3,JS代码:

function rowRender(rowclass, even, odd, className) {
  even = even || ""; 
  odd = odd || "";
  $(rowclass + ":odd").addClass(odd); //奇数行样式。
  $(rowclass + ":even").addClass(even);  //偶数行样式。
  $(rowclass).hover(function () {
    $(this).addClass(className); //鼠标移上去时背景样式
  },function () {
    $(this).removeClass(className); //鼠标移开背景样式
  });
}

代码应用:
在浏览器加载时调用js中的rowRender方法即可,例如:

rowRender('.colorEven li', 'odd', 'even', 'ovbeg');  //隔行变色调用

您可能感兴趣的文章:
js 隔行变色的最简单代码
JS控制表格隔行变色的实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js表格隔行换色(隔行变色)代码一例
Js实现表格隔行变色,鼠标经过时高亮显示的代码
javascript实现隔行变色函数代码一例
表格隔行变色的js实现代码