<style>
li {
list-style: none;
width: 100%;
height: 20px;
background-color: #999;
}
.Path {
color: #ffffff !important;
background-color: #1890ff !important;
border-bottom: 1px solid #ffffff;
transition: all .01s;
}
.leftBox {
display: inline-block;
width: 200px;
height: 300px;
background-color: #ddd;
vertical-align: top;
}
.rightBox {
display: inline-block;
width: 200px;
height: 300px;
background-color: #ddd;
vertical-align: top;
}
.btnBox {
display: inline-block;
vertical-align: top;
}
.btnBox button {
display: block;
background-color: orangered;
width: 100px;
height: 40px;
margin-top: 30px;
}
</style>
<body>
<ul class="leftBox">
<li>左1</li>
<li>左2</li>
<li>左3</li>
</ul>
<div class="btnBox">
<button class="leftBtn"><-</button>
<button class="rightBtn">-></button>
</div>
<ul class="rightBox">
<li>右1</li>
<li>右2</li>
<li>右3</li>
</ul>
<script>
</script>
</body>
<script>
//穿梭框左侧选中
$(".leftBox").on('click', 'li', function() {
if ($(this).hasClass('Path')) {
$(this).removeClass('Path');
} else {
$(this).addClass('Path');
}
});
//穿梭框右侧选中
$(".rightBox").on('click', 'li', function() {
if ($(this).hasClass('Path')) {
$(this).removeClass('Path');
} else {
$(this).addClass('Path');
}
});
//向右移动
$(".rightBtn").click(function() {
if ($(".leftBox .Path").length == 0) return false;
$(".leftBox").find('.Path').appendTo(".rightBox");
$(".rightBox li").removeClass('Path');
});
//向左移动
$(".leftBtn").click(function() {
if ($(".rightBox .Path").length == 0) return false;
$(".rightBox .Path").appendTo(".leftBox");
$(".leftBox li").removeClass('Path');
});
</script>
