div互相切换
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../demo/jquery-2.1.1.min.js"></script>
<style>
.warp {
position: relative;
}
.one,
.two {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #000000;
position: absolute;
}
.two {
left: 200px;
}
.three {
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid #000000;
position: absolute;
top: 0;
left: 400px
}
.oneinner,
.twoinner,
.threeinner {
width: 100%;
height: 100%;
text-align: center;
}
.oneinner {
background-color: royalblue;
}
.twoinner {
background-color: aquamarine;
}
.threeinner {
background-color: yellowgreen;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="warp">
<div class="one kk">
<div class="oneinner">
<img src="../chat-widget/img/t1.png" />
</div>
</div>
<div class="two kk">
<div class="twoinner">
<img src="../chat-widget/img/t2.png" />
</div>
</div>
<div class="three kk">
<div class="threeinner">
<img src="../chat-widget/img/t3.png" />
</div>
</div>
</div>
<script>
$(".kk").click(function() {
var cur = $(this);
//点击的哪个
var clickwhat = cur[0].classList[0];
if(clickwhat == "one") {
var temp = $(".oneinner")[0].innerHTML;
$(".oneinner")[0].innerHTML = $(".threeinner")[0].innerHTML;
$(".threeinner")[0].innerHTML = temp;
} else if(clickwhat == "two") {
var temp = $(".twoinner")[0].innerHTML;
$(".twoinner")[0].innerHTML = $(".threeinner")[0].innerHTML;
$(".threeinner")[0].innerHTML = temp;
}
})
</script>
</body>
</html>
