<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>双向列表对应切换</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="title_list">
<!--左侧成员列表-->
<div class="transform_left">
<div class="transform_title">管理员</div>
<div class="transform_left_content">
<div class="transform_left_list">
<p>
<span class="online">张三1</span>
</p>
<p>
<span class="online">张三2</span>
</p>
<p>
<span>张三3</span>
</p>
<p>
<span>张三4</span>
</p>
</div>
</div>
</div>
<!--中间的按钮切换-->
<div class="transform_content">
<img class="to_right" src="images/right.png"/>
<img class="to_left" src="images/left.png"/>
</div>
<!--右侧成员列表-->
<div class="transform_right">
<div class="transform_title">管理员</div>
<div class="transform_right_content">
<div class="transform_right_list">
<p>
<span class="online">李四1</span>
</p>
<p>
<span class="online">李四2</span>
</p>
<p>
<span>李四3</span>
</p>
<p>
<span>李四4</span>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
css部门
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
.title_list{
position: absolute;
width: 211px;
height: 311px;
top: 46px;
left: 5px;
border: 1px solid #1c6caa;
}
.transform_left{
position: absolute;
width: 93px;
height: 312px;
left: 0px;
border-right: 1px solid #1C6CAA;
}
.transform_title{
height: 30px;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #1c6caa;
}
.online{
color: #fbc552;
}
.transform_left_content{
position: absolute;
width: 93px;
height: 276px;
overflow: auto;
}
.transform_left_list p{
text-align: center;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.transform_left_list p.selected{
background: #6b6565;
}
/*中间部分*/
.transform_content{
position: absolute;
width: 20px;
height: 100px;
left: 97px;
top: 95px;
}
.transform_content img{
margin-top: 20px;
cursor: pointer;
}
/*右侧部分*/
.transform_right{
position: absolute;
width: 93px;
height: 312px;
right: 0px;
border-left: 1px solid #1C6CAA;
}
.transform_right_content{
position: absolute;
width: 93px;
height: 276px;
overflow: auto;
}
.transform_right_list p{
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.transform_right_list p.selected{
background: #6b6565;
}
js部门
$(function(){
//双列表切换
threeTableSwitch();
})
function threeTableSwitch(){
//左侧管理员脚步
$(".transform_left_list").delegate("p","click",function(){
var classname = this.className;
if(classname == "selected"){
this.className = "";
}else{
this.className = "selected";
}
})
//右侧普通成员脚步
$(".transform_right_list").delegate("p","click",function(){
var classname = this.className;
if(classname == "selected"){
this.className = "";
}else{
this.className = "selected";
}
})
//点击右侧的箭头
var left_check2 = [];
$(".to_right").click(function(){
$(".transform_left_list .selected").each(function(){
left_check2.push($(this).children("span").text());
$(this).remove();
var html ="";
$.each(left_check2, function(i,v) {
html+="<p><span>"+ v +"</span></p>";
});
$(".transform_right_list").append(html);
left_check2 = [];
})
})
//点击左侧的箭头
var left_check3 = [];
$(".to_left").click(function(){
$(".transform_right_list .selected").each(function(){
left_check3.push($(this).children("span").text());
$(this).remove();
var html ="";
$.each(left_check3, function(i,v) {
html+="<p><span>"+ v +"</span></p>";
});
$(".transform_left_list").append(html);
left_check3 = [];
})
})
}