您的位置：首页 > 其它

动态生成标签和删除

2015-11-02 19:36 330 查看

动态生成标签和删除

相对繁琐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
.x1{
width:80px;
height:30px;
background:#666;
text-align:center;
float:left;
margin-right:10px;
}
#cx{
width:300px;
height:0px;

}
#item1,#item2,#item3{
width:300px;
height:30px;
}
</style>
<script>
$(function(){

var as =$("#item1 a");
as.click(function(){
var anr=$(this).text();
var bq="<div class='x1' id='s1'>"+anr+"<button type='button' id='fd'>X</button></div>";
$("#cx").append(bq);
$("#item1").hide();
$("#fd").click(function (){
$("#s1").remove();
$("#item1").show();
});
});

var as2 =$("#item2 a");
as2.click(function(){
var anr2=$(this).text();
var bq2="<div class='x1'  id='s2'>"+anr2+"<button type='button' id='fd1'>X</button></div>";
$("#cx").append(bq2);
$("#item2").hide();
$("#fd1").click(function (){
$("#s2").remove();
$("#item2").show();
});
});

var as3 =$("#item3 a");
as3.click(function(){
var anr3=$(this).text();
var bq3="<div class='x1' id='s3'>"+anr3+"<button type='button' id='fd2'>X</button></div>";
$("#cx").append(bq3);
$("#item3").hide();
$("#fd2").click(function (){
$("#s3").remove();
$("#item3").show();
});
});

});
</script>
</head>

<body>
<div id="content">
<div id="cx">
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
<div id="item1">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<div id="item2">
<a href="#">a</a>
<a href="#">b</a>
<a href="#">c</a>
</div>
<div id="item3">
<a href="#">x</a>
<a href="#">y</a>
<a href="#">z</a>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 标签

相关文章推荐

新的分享

章节导航