Menu selector that changes the background of a selected div I made this code to change the background color for a div in a set of divs while disabling the rest of the divs in the background. It works fine, but I wanted the code reviewed for more improvements since I am new to jQuery and JavaScript.

&lt;div id="singleProjectTitle"&gt;
    &lt;div  class="ProjectMainLink" id="aboutProject"&gt;&lt;div  class="ProjectMainLinkInnerDiv"&gt;عن المشروع&lt;/div&gt;&lt;/div&gt;
    &lt;div  class="ProjectMainLink" id="key"&gt;&lt;div  class="ProjectMainLinkInnerDiv"&gt;المميزات الرئيسية&lt;/div&gt;&lt;/div&gt;
    &lt;div  class="ProjectMainLink" id="map"&gt;&lt;div  class="ProjectMainLinkInnerDiv"&gt;الخارطة&lt;/div&gt;&lt;/div&gt;
    &lt;div  class="ProjectMainLink" id="galary"&gt;&lt;div  class="ProjectMainLinkInnerDiv"&gt;البوم الصور والفيديو  &lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;


  var count = $(".ProjectMainLink").length;
     for(var i=0; i&lt;count;i++){
         $(".ProjectMainLink").eq(i).click(function() {
              $(".ProjectMainLink").css("background-color","");
            $(this).css("background-color","#fff");

        });
         }
im not sure why you would want the length or count of the class..
You could simply use this to highlight the divs:

    $(".ProjectMainLink").click(function() {
          $(".ProjectMainLink").css("background-color","");
          $(this).css("background-color","#000");

    });


JS FIDDLE: http://jsfiddle.net/p3m2p/

EDIT:

Don't forget to wrap your functions in &lt;script type="text/javascript"&gt;&lt;/script&gt;

It could also be done like this:

&lt;script type="text/javascript"&gt;
$(document).on("click",".ProjectMainLink",function() {
          $(".ProjectMainLink").css("background-color","");
          $(this).css("background-color","#000");
    });
&lt;/script&gt;