代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="Anthor" content="xyong" />
<title>Title</title>
<style>
*{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
li{ list-style-type: none;}
html,body{
height: 100%;
}
body{
background: -webkit-linear-gradient(top,#8bc1de,#f9a887);
}
#box{
position: relative;
width: 1000px;
height: 550px;
margin: 100px auto;
}
#left{
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.8);
}
#right{
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
background: rgba(0,0,0,.4);
}
#left .title{
margin: 100px 0 0 50px;
color: #f60;
}
#left .title span{
color: #000;
font-size: 14px;
cursor: pointer;
}
#left .title span:hover{
color: #ff852c;
}
#left ul{
margin: 20px 0 0 50px;
}
#left ul li{
float: left;
padding: 3px 10px;
margin: 5px;
border: 1px solid #000;
font-size: 14px;
}
#left ul li i{
margin-right: 5px;
}
#left ul li span{
cursor: pointer;
}
#right ul{
margin: 100px 0 0 50px;
}
#right ul li{
float: left;
padding: 3px 10px;
font-size: 14px;
color: #fff;
border: 1px solid #fff;
margin: 5px;
}
</style>
</head>
<body>
<div id="box">
<div id="left">
<div class="title">
熱門目的地：
<span>馬來西亞</span>
<span>泰國</span>
<span>三亞</span>
<span>新西蘭</span>
<span>雲南</span>
</div>
<ul>
<!--<li><i>泰國</i> | <span>×</span></li>
<li><i>新西蘭</i> | <span>×</span></li>-->
</ul>
</div>
<div id="right">
<ul>
<!--<li>泰國</li>
<li>新西蘭</li>-->
</ul>
</div>
</div>
<script>
var aSpan = document.getElementsByClassName("title")[0].children,
oLeftUl = document.querySelector("#left ul"),
oRightUl = document.querySelector("#right ul"),
length = aSpan.length;
//給熱門標籤加點擊事件
for (var i = 0; i < length; i++) {
aSpan[i].ifAdd = false;
aSpan[i].onclick = function () {
if ( !this.ifAdd ){
this.ifAdd = true;
//獲取點擊的span的內容
var val = this.innerHTML;
//左邊內容的生成
createLeft.call(this,val);
//右邊內容的生成
createRight.call(this,val);
}
};
}
//左邊
function createLeft(val){
//判斷是否已經生成過對應的左邊節點
if ( !this.leftLi ){
//先創建li，把不需要加事件的內容填充好
this.leftLi = document.createElement("li");
this.leftLi.innerHTML = "<i>"+val+"</i> | ";
//將需要加事件的span單獨拿出來創建並賦值好事件
var span = document.createElement("span");
span.innerHTML = "×";
var This = this;
span.onclick = function () {
oLeftUl.removeChild(This.leftLi);
oRightUl.removeChild(This.rightLi);
//使熱門標籤重新可以觸發點擊事件
This.ifAdd = false;
};
//將span 添加進 li
this.leftLi.appendChild(span);
}
//將 li 添加進 ul
oLeftUl.appendChild(this.leftLi);
}
//右邊
function createRight(val){
//判斷是否生成過對應的右邊節點
if ( !this.rightLi ){
this.rightLi = document.createElement("li");
this.rightLi.innerHTML = val;
}
oRightUl.appendChild(this.rightLi);
}
</script>
</body>
</html>效果圖如下：
知識點如下：
1、爲熱門標籤賦予屬性isAdd，從而杜絕重複添加標籤的操作。
2、用標籤屬性存儲左右新創建的li標籤，當用戶第二次添加熱門標籤時（先刪除，再添加），不需要重新創建li標籤。