<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var count = 0;
var replace_id = Array();
$(document).ready(function(){
$("div.block").click(function(){
replace_id[count]=$(this);
//при клике добавляет класс block_click, если не надо то удалить
$(this).addClass("block_click");
//набрали два объекта
if(count==1){
//убираем класс block_click из объектов, если не надо то удалить
replace_id[0].removeClass("block_click");
replace_id[1].removeClass("block_click");
//меняем html объектов
temp = replace_id[0].html();
replace_id[0].html(replace_id[1].html());
replace_id[1].html(temp);
count = 0;
}else{
count=1;
}
});
});
</script>
<style type="text/css">
<!--
.block{
height:100px;
width:100px;
border:1px solid #000;
}
.block_click{
border:2px solid #F00;
}
-->
</style>
</head>
<body>
<div id="div1" class="block">111</div>
<div id="div2" class="block">222</div>
<div id="div3" class="block">333</div>
</body>
</html>