<!DOCTYPE HTML>
<html>
<head>
<style>
div[id^="Div"]{
height: 50px; /* Высота блока */
width: 100px; /* Ширина блока */
padding: 7px; /* Поля вокруг текста */
border:solid 1px;
margin:7px;
}
div.change {
border:dotted 1px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="Wrp">
<div tabindex="1" id="Div1" style="border-color:red">Div1</div>
<div tabindex="2" id="Div2" style="border-color:blue">Div2</div>
<div tabindex="3" id="Div3" style="border-color:green">Div3</div>
</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.Wrp').on('click','div[id^="Div"]',function () {
var a = $('.Wrp').find('.change');
if( a.get(0)===$(this).get(0)){a.removeClass('change');return false;}
$(this).addClass('change');
if(a.length>=1) {
var b = $(this).clone();
var c = a.clone();
a.replaceWith(b);
$(this).replaceWith(c);
$('div[id^="Div"]').removeClass('change');
}
});
});
</script>
</body>
</html>