Question

DIV块内容切换

网站内的DIV块点击按钮后内容相互交换位置？如上下互换等…请高手朋友帮忙，最好有代码说明，谢谢。
谢谢loverofdream朋友的回答。问题还是没有解决。我想要的是点击文字连接后DIV块内容互换，随之连接文字也需做相应变化。如下面DIV块的连接文字为‘向上’，上面DIV块的连接文字为‘向下’，当任意点击‘向上’或‘向下’连接后两DIV块内容互换，内容互换后上面DIV块（原下）的连接文字要为‘向下’，下面DIV块（原上）的连接为‘向上’。再问3个DIV块可否实现此功能呢？OK后定加分酬谢。

Answer 1

按照你说的，两个div块比较简单，代码如下

<div id='myDiv'>
<div id='div1' style='width:200;height:100;background-color:#FF0000'>
<span style='cursor:hand' onclick='move(this)'>向下</span>
</div>
<div id='div2' style='width:200;height:100;background-color:#00FF00'>
<span style='cursor:hand' onclick='move(this)'>向上</span>
</div>
</div>
<script>
function move(obj) {
var upobj = obj.parentElement.parentElement.childNodes[0];
var downobj = obj.parentElement.parentElement.childNodes[1];
var myDiv = document.getElementById('myDiv');
myDiv.removeChild(upobj);
myDiv.removeChild(downobj);
myDiv.appendChild(downobj);
myDiv.appendChild(upobj);
syncPos();
}

function syncPos() {
var myDiv = document.getElementById('myDiv');
myDiv.childNodes[0].innerHTML = "<span style='cursor:hand' onclick='move(this)'>向下</span>";
myDiv.childNodes[1].innerHTML = "<span style='cursor:hand' onclick='move(this)'>向上</span>";
}
</script>

三个div块比较复杂，我的做法不一定是最优的，只是简单实现了你的需求

<div id='myDiv'>
<div id='div1' style='width:200;height:100;background-color:#FF0000'>
<span style='cursor:hand' onclick='moveDown(this)'>向下</span>
</div>
<div id='div2' style='width:200;height:100;background-color:#FFFF00'>
<span style='cursor:hand' onclick='moveDown(this)'>向下</span> <span style='cursor:hand' onclick='moveUp(this)'>向上</span>
</div>
<div id='div3' style='width:200;height:100;background-color:#0000FF'>
<span style='cursor:hand' onclick='moveUp(this)'>向上</span>
</div>
</div>
<script>
function moveUp(obj) {
var upobj = obj.parentElement.parentElement.childNodes[0];
var midobj = obj.parentElement.parentElement.childNodes[1];
var downobj = obj.parentElement.parentElement.childNodes[2];
var flag = obj.parentElement.parentElement.childNodes[1] == obj.parentElement;
var myDiv = document.getElementById('myDiv');
myDiv.removeChild(upobj);
myDiv.removeChild(midobj);
myDiv.removeChild(downobj);
if (flag) {
myDiv.appendChild(midobj);
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
}
else {
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
myDiv.appendChild(midobj);
}
syncPos();
}

function moveDown(obj) {
var upobj = obj.parentElement.parentElement.childNodes[0];
var midobj = obj.parentElement.parentElement.childNodes[1];
var downobj = obj.parentElement.parentElement.childNodes[2];
var flag = obj.parentElement.parentElement.childNodes[1] == obj.parentElement;
var myDiv = document.getElementById('myDiv');
myDiv.removeChild(upobj);
myDiv.removeChild(midobj);
myDiv.removeChild(downobj);
if (flag) {
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
myDiv.appendChild(midobj);
}
else {
myDiv.appendChild(midobj);
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
}
syncPos();
}

function syncPos() {
var myDiv = document.getElementById('myDiv');
myDiv.childNodes[0].innerHTML = "<span style='cursor:hand' onclick='moveDown(this)'>向下</span>";
myDiv.childNodes[1].innerHTML = "<span style='cursor:hand' onclick='moveDown(this)'>向下</span> <span style='cursor:hand' onclick='moveUp(this)'>向上</span>";
myDiv.childNodes[2].innerHTML = "<span style='cursor:hand' onclick='moveUp(this)'>向上</span>";
}
</script>