JS部分
<script type="text/javascript">
$(document).ready(function(){$("ul li:even").addClass("eqa");//偶数行的背景色$("ul li:odd").addClass("eqb");//奇数行的背景色$("ul li").hover(function(){$(this).addClass("eqc")}, function(){$(this).removeClass("eqc")});//鼠标移动改变背景色$("tr:even").addClass("eqa");//偶数行的背景色$("tr:odd").addClass("eqb");//奇数行的背景色$("tr").hover(function(){$(this).addClass("eqc")}, function(){$(this).removeClass("eqc")});//鼠标移动改变背景色});
</script>
CSS部分:
<style type="text/css">
.eqa { background-color:#efefef;}/*偶数行的背景色*/.eqb { background-color:#f7f8f8;}/*奇数行的背景色*/.eqc { background-color:#dcdddd;}/*鼠标移动改变背景色*/ul { list-style:none; width:300px; margin:0; padding:0; font-size:12px;}ul li { width:300px; line-height:24px;}a { color:#333; text-decoration:none;}a:hover { color:#06C; text-decoration:underline;}table { width:300px; font-size:12px;}table tr { width:300px; line-height:24px;}
</style>
HTML部分:
<h2>ul演示</h2>
<ul>
<li><a href="">第一行,ul、table隔行换色!</a></li>
<li><a href="">第二行,ul、table隔行换色!</a></li>
<li><a href="">第三行,ul、table隔行换色!</a></li>
<li><a href="">第四行,ul、table隔行换色!</a></li>
<li><a href="">第五行,ul、table隔行换色!</a></li>
<li><a href="">第六行,ul、table隔行换色!</a></li>
<li><a href="">第七行,ul、table隔行换色!</a></li>
<li><a href="">第八行,ul、table隔行换色!</a></li>
</ul>
<h2>table演示</h2>
<table>
<tr><td><a href="">第一行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第二行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第三行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第四行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第五行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第六行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第七行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第八行,ul、table隔行换色!</a></td></tr>
</table>
<ul>
<li><a href="">第一行,ul、table隔行换色!</a></li>
<li><a href="">第二行,ul、table隔行换色!</a></li>
<li><a href="">第三行,ul、table隔行换色!</a></li>
<li><a href="">第四行,ul、table隔行换色!</a></li>
<li><a href="">第五行,ul、table隔行换色!</a></li>
<li><a href="">第六行,ul、table隔行换色!</a></li>
<li><a href="">第七行,ul、table隔行换色!</a></li>
<li><a href="">第八行,ul、table隔行换色!</a></li>
</ul>
<h2>table演示</h2>
<table>
<tr><td><a href="">第一行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第二行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第三行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第四行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第五行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第六行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第七行,ul、table隔行换色!</a></td></tr>
<tr><td><a href="">第八行,ul、table隔行换色!</a></td></tr>
</table>