javascript 实现两个div位置互换或者内容互换 请高手给个经典实用的代码 谢谢

JavaScript014

javascript 实现两个div位置互换或者内容互换 请高手给个经典实用的代码 谢谢,第1张

<div id='div1'>xxx</div>

<div id='div2'>yyy</div>

<script>

var d1=document.getElementById('div1').innerHTML

var d2=document.getElementById('div2').innerHTML

document.getElementById('div2').innerHTML=d1

document.getElementById('div1').innerHTML=d2

</script>

原理：就是讲全部的div都隐藏只有点击的div显示。

<script type="text/javascript">

$(function(){

$("#list a").click(function(){//点击链接

 $("#main div").css("display","none")//将main下所有的div都隐藏

 $("#main div:eq(" + $(this).index() + ")").css("display","block") //链接对应的div显示

}) 

})

</script>

这个问题涉及到了两个知识点，一个知识点是利用js操作dom的css属性；另一个知识点是js进行定时操作。

有两种实现方式，一种是用原生js，另一种是用jquery。为了简单，以jquery为例：

<html>

<head>

<script src="./jquery.js"></script>

</head>

<body>

<div id="d1" style="display:none">d1</div>

<div id="d2">d2</div>

<script>

$(function(){

//转换div

function changeDiv(){

if($("#d1").style.display==none){

$("#d1").show()

$("#d2").hide()

}else{

$("#d1").hide()

$("#d2").show()

}

}

//利用setInterval，设置每隔10秒执行changeDiv函数。

window.setInterval("changeDiv()",10000)

})

</script>

</body>

</html>