一个简单的双色li列表，基于jquery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个简单的双色li列表，基于jquery</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$('.dbcolor').each(function(){
$(this).children(':even').addClass('bg1');
$(this).children(':odd').addClass('bg2');
$(this).children().mouseover(function(){
$(this).addClass('hover');
}).mouseout(function(){
$(this).removeClass('hover');
});
});
});
</script>
<style>
.ulA li.bg1 { background:#f4f4f4;}
.ulA li.bg2 { background:#fff9c3;}
.ulA li.hover { background:#f88;}
.ulB li.bg1 { background:#f4f4f4;}
.ulB li.bg2 { background:#fff9c3;}
.ulB li.hover { background:#f88;}
</style>
</head>
<body>
<ul class="dbcolor ulA">
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
</ul>
<ul class="dbcolor ulB">
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
<li>一个简单的双色li列表，基于jquery</li>
</ul>
</body>
</html>