<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="style/.css" type="text/css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script>
//四要素
var strPic="http://img04.taobaocdn.com/tfscom/i2/T15QseFKlbXXb1upjX_400x400.jpg,http://img04.taobaocdn.com/tfscom/i4/T1uGjVFLFbXXcuhVjX_400x400.jpg";
var arrPic=strPic.split(",");
var strTit="男装模板SDK_011,女装模板SDK_012,"
var arrTit=strTit.split(",");
$(function(){//等待dom加载完毕
//插入dom
for (var i=0;i<arrTit.length;i++){
if (arrTit[i].length>0){ $(".left").append("<div class='list'>"+arrTit[i] +"</div>"); }
}
//绑定事件
$.each($(".list"),function(index,val){
//为每个list绑定事件
$(this).click(function(){
//处理列表list的css样式
$(".list").css("background","#737373");
$(".list").css("color","#f2f2f2");
$(this).css("background","#505050");
$(this).css("color","#ffffff");
//处理图片
$("img").attr("src",arrPic[index]);
$(".right").slideUp(200);
$(".right").slideDown(200);
})
})
})
</script>
</head>
<body>
<style>
.outer {width:570px; height:750px; border:solid 10px #d0d0d0; overflow:outo; }
.outer .left {width:170px; height:750px; background:#f0f0f0; float:left; display:inline; overflow-y:scroll; overflow-x:hidden; scrollbar-width:5px; border:solid 1px #f2f2f2; }
.outer .left .list {width:150px; height:30px;border-top:solid 1px #858585; border-bottom:solid 1px #5d5d5d; background:#737373; font-size: 14px; color: #f2f2f2 ;line-height: 30px; text-align: center; font-family:'微软雅黑'; cursor:pointer;}
.outer .right {width:384px; height:750px; float:left; display:inline; margin-left:10px; background:#f0f0f0; }
.outer .right .pic {width:394px; height:410px; overflow:hidden; margin-top:30px; margin-left:50px; }
.outer .right .pic img {border:solid 5px #d0d0d0; }
.outer .right .btns {width:384px; height:150px; overflow:hidden; }
</style>
<div class="outer">
<div class="left">
<!-- 插入 -->
</div>
<div class="right">
<div class="pic"><img src="http://img04.taobaocdn.com/tfscom/i4/T1uGjVFLFbXXcuhVjX_400x400.jpg" ></img></div>
<div class="btns"></div>
</div>
</div>
</body>
</html>
Jquery 动态添加dom后,再为其绑定事件
最新推荐文章于 2022-11-07 14:15:21 发布