<html>
<head>
<script src="
<link href="
<link href="
<style>
.selectcase li {float:left list-style:none outside none}
</style>
<script src="
<script src="
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ui id="tags">
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
</ui>
当前条件
<div>
<ui class="selectcase">
</ui>
</div>
<script>
$(function(){
$("#tags li").click(function(){
var tagsName = $(this).text(),
selectCase = $(".selectcase:eq(0)")
if(selectCase.find("[data-id='"+ tagsName +"']").size()==0){
var selectTags = "<li><a class=\"btn btn-primary\" data-id=\""+ tagsName +"\">"+ tagsName +"<button class=\"close closetag\" type=\"button\" >×</button></a></li>"
selectCase.append(selectTags)
}
})
tagCloseSelf()
})
function tagCloseSelf(){
$(".selectcase").on("click", ".btn", function(){
$(this).parent().remove()
})
}
</script>
</body>
</html>
效果见http://jsbin.com/jewe/3/edit
$("ul").prepend('<a href=""></a>') /* ul 内-前面 插入内容 */$("ul").append('<a href=""></a>') /* ul 内-后面 插入内容 */
$("ul").before('<a href=""></a>') /* ul 外-前面 插入内容 */
$("ul").after('<a href=""></a>') /* ul 外-后面 插入内容 */
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style type="text/css">
.skin { width:580pxbackground:#09Fmargin:0 autooverflow:hidden}
.imgbox { width:100pxmargin:10px 0 10px 10pxfloat:left}
.imgbox h4 { text-align:centerheight:20pxline-height:20pxpadding:0margin:0}
.imgbox img { width:100pxheight:100pxmargin-bottom:10px}
</style>
</head>
<body>
<div class="skin">
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="1" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="2" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="3" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="4" title="" /></div>
<div class="imgbox"><img src="1.jpg" width="100" height="100" alt="5" title="" /></div>
</div>
<script type="text/javascript">
$(function(){
$(".imgbox>img").each(function(){
var text=$(this).attr("alt")
$(this).parent(".imgbox").append("<h4>"+text+"</h4>")
$(this).attr("title",text)
})
})
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）