<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.3/jquery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div { display: block; } .div1 { width: 100px; height: 50px; background: darkolivegreen; margin: 10px; float: left; } .stylediv { border: 1px solid red; background: white; } </style> </head> <body> <div class="div1"> </div> <div class="div1"> </div> <div class="div1"> </div> <div class="div1"> </div> <script type="text/javascript"> $(function() { $(".div1").click(function() { $(this).addClass("stylediv").siblings().removeClass("stylediv"); }); }); </script> </body> </html>