jquery隔行变色代码
昨天记下个jquery的选项卡代码，今天继续记。
很多时候我们在评论或li列表里会用到隔行变色以及经过变色这样的功能，这个功能说来比较花哨，但又不失其实用效果，可以有效的缓解视疲劳，以及让观者不至看串行。废话少说，代码在下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Discolor</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#list li:even").addClass("li_bg1");
$("#list li:odd").addClass("li_bg2");
$("#list li").hover(function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
});
});
-->
</script>
<style type="text/css">
#list .li_bg1 {
background:#FFF;
}
#list .li_bg2 {
background:#F0F;
}
#list li.hover {
background:#0F0;
}
</style>
</head>
<body>
<div>
<ul id="list">
<li>Content of the One!</li>
<li>Content of the Two!</li>
<li>Content of the Three!</li>
<li>Content of the Four!</li>
<li>Content of the Five!</li>
<li>Content of the Six!</li>
<li>Content of the Seven!</li>
<li>Content of the Eight!</li>
</ul>
</div>
</body>
</html>
代码很简单，不用做什么说明了。
最新评论