<!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=
"
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
"
);
//
把自己背景色設(shè)為紅色兄弟節(jié)點(diǎn)設(shè)為白色
}).click(function () { $(
this
).css(
"
background
"
,
"
white
"
).appendTo(
"
#ul2
"
) })
//
點(diǎn)擊后添加到第二個(gè)ul中
});
</script>
</head>
<body>
<ul id=
"
ul1
"
style=
"
float: left; width: 30%
"
>
<li>國足</li>
<li>朝鮮隊(duì)</li>
<li>美國隊(duì)</li>
<li>韓國隊(duì)</li>
<li>巴西隊(duì)</li>
<li>越南隊(duì)</li>
<li>伊拉克隊(duì)</li>
</ul>
<ul id=
"
ul2
"
style=
"
float: left; width: 30%
"
>
</ul>
</body>
</html>