<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" charset="utf-8"/>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.select{background-color:#f00;}
</style>
</head>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
function test(a,b,c,d){
a.click(function(){
if($("#div"+b+" .select").length==0){
alert("请选择语言!");
}else if($("#div"+b+" .select").length>1&&d==1){
alert("不能同时对多种语言进行操作");
}else{
c.append($("#div"+b+" .select"));
$("#div"+b+" .select").remove();
}
})
}
$(document).ready(function(){
$("#div1 p").toggle(
function(){
$(this).addClass("select");},
function(){
$(this).removeClass("select");
});
test($("#b1"),1,$("#div3"),0);
test($("#b2"),1,$("#div3"),1);
test($("#b3"),3,$("#div1"),1);
test($("#b4"),3,$("#div1"),0);
})
</script>
<body>
<div id="div0" style="width:400px;heigth:200px;">
<div id="div1" style="border:1px solid #000000;width:150px;height:250px;float:left;">
<p id="p1">俄语</p>
<p id="p2">日语</p>
<p id="p3">英语</p>
<p id="p4">德语</p>
<p id="p5">法语</p>
<p id="p6">其他外语</p>
</div>
<div id="div2" style="width:40px;float:left;">
<p><input type="button" value=">>" id="b1" style="width:40px;"></p>
<p><input type="button" value=">" id="b2" style="width:40px;"></p>
<p><input type="button" value="<" id="b3" style="width:40px;"></p>
<p><input type="button" value="<<" id="b4" style="width:40px;"></p>
</div>
<div id="div3" style="border:1px solid #000000;width:150px;height:250px;float:left;">
</div>
</div>
</body>
</html>