title: jquery onclick change css background image
body: <p>am using this code to get menu tab.when i mouseover on the tab the tab image will change, similarly i want to change the image of tab onlick using jquery.i used the below code to do this but i was not able to get it.how can i do this.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Css Menu&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;style&gt;
      .home {
          background: url("images/tab2.png") repeat scroll 0 0 transparent;
          border-radius: 4px 4px 0 0;
          height: 75px;
          left: 54px;
          position: relative;
          top: 25px;
          width: 90px;
      } 
      .home:hover {
          background: url("images/tab3.png") repeat scroll 0 0 transparent;
          border-top: 1px solid black;
          border-left: 1px solid black;
          border-right: 1px solid black;
      }
  
  
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
                $('.home').click(function() {
                      $('home').css('backgroundImage', 'url(images/tabs3.png)');
                });
          }):
      &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;&lt;div class="frame"&gt;
      &lt;div class="header1"&gt;&lt;/div&gt;
      &lt;div class="header2"&gt;
          &lt;a href="#"&gt;&lt;div class="home" onclick="function()"&gt;&lt;img src="images/tools.png" class="image"&gt;&lt;br&gt;&lt;span class="align"&gt;Home&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;div class="header3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>