您的位置：首页 > 其它

使用DOM模型实现图片在div之间切换

2014-07-31 19:28 344 查看 
<head>
<style type="text/css">
div {height: 120px; border: 1px solid black; background-color: #EEE; padding: 2px;}
img {width: 100px; height: 100px; margin: 2px; border: 1px solid gray; cursor: pointer;}
</style>
</head>
<script type="text/javascript">
function init()
{
//将10张图片放入到未选中栏目
var unSel = document.getElementById("unSelected");
for(var i = 1; i < 11; i++)
{
var img = document.createElement("IMG");
img.setAttribute("src", "images/"+i+".jpg");
//为图片添加点击事件
img.setAttribute("onclick", "img_onclick(this)");
unSel.appendChild(img);
}
}
//图片事件处理方法
function img_onclick(img)
{
var unSel = document.getElementById("unSelected");
var sel = document.getElementById("selected");
//判断当前被点击图片的父节点是哪一个
if(img.parentNode == unSel)
{
//如果父节点是"未选中商品栏"，则将图片移至"选中商品栏"
sel.appendChild(img);
}
else
{
unSel.appendChild(img);
}
}
</script>
<body onload="init()">
<h3>未选中商品</h3>
<div id="unSelected"></div>
<h3>已选中商品</h3>
<div id="selected"></div>
</body>


未选中前



选中后

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  DOM解析 div切换
相关文章推荐
新的分享
章节导航