您的位置:首页 > Web前端 > JQuery

jquery实现隔行变色,点击换色,鼠标悬浮当前行变色效果,div+css 细表格样式

2013-08-30 14:12 1216 查看
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>



。绿色为点击后的 颜色

。灰色为鼠标放上去的颜色
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: