日期:2014-05-16 浏览次数:20739 次
jquery实现隔行变色,点击换色,鼠标悬浮当前行变色效果,离开恢复原色
。绿色为点击后的 颜色
。灰色为鼠标放上去的颜色
<script type="text/javascript"> $(function () { //所有行 _odd_even(); $(".nlist_1s").each(function () { var _color = $(this).css("backgroundColor"); $(this).hover(function () { if (parseInt($(this).attr("class").indexOf("checked")) == -1) { $(this).css({ "backgroundColor": "#cccccc", "color": "black" }); } }, function () { if (parseInt($(this).attr("class").indexOf("checked")) == -1) { $(this).css({ "backgroundColor": _color, "color": "#535353" }); } }); $(this).click(function () { //所有行 _odd_even(); //当前行 $(this).css({ "backgroundColor": "#479423", "color": "#ffffff" }).addClass("checked"); }); }); }); function _odd_even() { //偶数行 第一行为偶数0行 $(".nlist_1s:odd").css({ "backgroundColor": "#E5F5FF", "color": "#535353" }).removeClass("checked"); //奇数行 $(".nlist_1s:even").css({ "backgroundColor": "transparent", "color": "#535353" }).removeClass("checked"); } </script>
。绿色为点击后的 颜色
。灰色为鼠标放上去的颜色