<!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>