首页 > 代码库 > JQ 更改li 颜色

JQ 更改li 颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>

<script src="http://www.mamicode.com/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type ="text/javascript" >
$(function() {
$("#ul1 li").css("cursor", "pointer").mouseover(function() {
$(this).css("background", "red").siblings().css("background", "white"); //把自己背景色设为红色兄弟节点设为白色
}).click(function() { $(this).css("background", "white").appendTo("#ul2") })//点击后添加到第二个ul中
});

</script>
</head>
<body>
<ul id="ul1" style =" float :left ; width :30%">
<li >国足</li>
<li >朝鲜队</li>
<li >美国队</li>
<li >韩国队</li>
<li >巴西队</li>
<li >越南队</li>
<li >伊拉克队</li>
</ul>

<ul id="ul2" style =" float :left ; width :30%"></ul>

</body>
</html>