title: change contents without reloading page
body: <p>I got a page. Its a key shop website.
  I want to make that when the customer clicks on the icon, for example <code>windows7</code>, it removes the other products beside it, and write its description and payment button.
  I already succeeded in not allowing the page to refresh, and only view the content.
  But the problem is the tab; I want to change it in the end of the page, and whenever I click on the icon for <code>windows7</code> it opens to me the page I want, but from the top.
  I'am using the following code:</p>
  
  <pre><code> &lt;script&gt;
       $("div.haha").tabs("img.one &gt; div", {effect: 'ajax'});
   &lt;/script&gt;
  </code></pre>
  
  <p>i just want it to change content and not to start from top</p>
  
  <pre><code>&lt;div id="haha"&gt;
      &lt;a href="product1.html"&gt;&lt;img class="one" src="imgs/product1.png"&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;img class="two" src="imgs/product2.png"&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;img class="three" src="imgs/product 3.png"&gt;&lt;/a&gt;
      &lt;a href="#"&gt;&lt;img class="four" src="imgs/product4.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>