<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#odiv div{ 200px; height: 200px; border:1px solid red;display: none; }
.active{background: red;};
</style>
<script src='../jquery-3.1.1.min.js'></script>
<script>
// window.onload=function(){
// var oDiv=document.getElementById('odiv');
// var oD=oDiv.getElementsByTagName('input');
// var aCn=oDiv.getElementsByTagName('div');
// for(i=0; i<oD.length; i++)
// {
// oD[i].index=i;
// oD[i].onclick=function(){
// for(i=0; i<oD.length; i++)
// {
// oD[i].className='';
// aCn[i].style.display='none';
// }
// this.className='active';
// aCn[this.index].style.display='block';
// }
// }
// }
$(function(){
$('#odiv').find('input').click(function(){
$('#odiv').find('input').attr('class', '');
$('#odiv').find('div').css('display','none');
$(this).attr('class', 'active');
$('#odiv').find('div').eq($(this).index()).css('display', 'block');
});
}
)
</script>
</head>
<body>
<div id="odiv">
<input class="oactive" type="button" value='1'/>
<input type="button" value='2'/>
<input type="button" value='3'/>
<div>1111</div>
<div >222</div>
<div >333</div>
</div>
</body>
</html>
