<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript " src="jquery-2.2.3.min.js"> </script> <style> #div1 div{ width: 200px; height: 200px; border:1px solid red; display: none; } .active{ background-color: red;} </style> <script> $(function(){ $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class',''); $('#div1').find('div').css('display','none'); $(this).attr('class','active'); $('#div1').find('div').eq($(this).index()).css('display','block'); }); }); </script> </head> <body> <div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display: block">11111</div> <div>222222</div> <div>333333</div> </div> </body> </html>