<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei";
}
body {
background: linear-gradient(#A1E6E9 0%, #fff 100%) no-repeat;
min-height: 400px;
}
.wrap_box {
700px;
overflow: hidden;
margin: 20px auto;
background: #5AB1FD;
border-radius: 5px;
padding: 10px;
font-size: 14px;
}
.wrap_box > * {
float: left;
margin: 10px;
}
ul {
height: 400px;
240px;
border-radius: 5px;
background: #fff;
border: 2px solid #2d88d7;
padding: 7px;
line-height: 30px;
}
ul li {
padding: 5px 20px;
list-style: none;
border-radius: 6px;
cursor: pointer;
}
li:nth-child(odd) {
background: #e6f1f7;
}
ul .active {
background: #5AB1FD;
color: #fff;
}
.btn {
background: #2d88d7;
border-radius: 5px;
padding: 20px;
color: #fff;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
margin-top: 20px;
}
.btn:hover {
background: #227ac7;
}
.btn span {
font-size: 40px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="wrap_box">
<ul class="left">
<li>javascript</li>
<li>Css</li>
<li>HTML</li>
<li>Less</li>
<li>Sass</li>
</ul>
<div class="middle">
<div class="btn">
<span>→</span>
<p>把文字右移</p>
</div>
<div class="btn">
<span>←</span>
<p>把文字左移</p>
</div>
</div>
<ul class="right">
<li>PHP</li>
<li>Java</li>
<li>Node</li>
<li>C#</li>
<li>.Net</li>
</ul>
</div>
<script>
var moveBtn = document.getElementsByClassName('btn');
var allList = document.getElementsByTagName('li');
var leftList = document.getElementsByClassName('left')[0].getElementsByTagName('li');
var rightList = document.getElementsByClassName('right')[0].getElementsByTagName('li');
var leftInput = document.getElementsByClassName('left')[0];
var rightInput = document.getElementsByClassName('right')[0];
//选中的时候
for(var i=0;i<allList.length;i++){
allList[i].onclick=function(){
this.className = this.className?"":"active"; // 当我们点击的时候，给当前项添加一个active的类名；
}
}
//当我们点击向右的时候
moveBtn[0].onclick=function(){
for(var i=0;i<leftList.length;i++){
console.log(1)
if(leftList[i].className=='active'){
var aDom=document.getElementsByClassName('left')[0].getElementsByClassName('active');
var cloneDom=[];
for(var j=0;j<aDom.length;j++){
cloneDom.push(aDom[j]);
}
for(var j=0,len=cloneDom.length;j<len;j++){
cloneDom[j].className='';
rightInput.appendChild(cloneDom[j]);
}
}
}
};
//点击向左的时候
moveBtn[1].onclick=function(){
for(var i=0;i<rightList.length;i++){
if(rightList[i].className=='active'){
var aDom=document.getElementsByClassName('right')[0].getElementsByClassName('active');
var cloneDom=[];
for(var j=0;j<aDom.length;j++){
cloneDom.push(aDom[j]);
}
for(var j=0,len=cloneDom.length;j<len;j++){
cloneDom[j].className='';
leftInput.appendChild(cloneDom[j])
}
}
}
}
</script>
</body>
</html>