更改内容而无需重新加载页面

Question

I got a page. Its a key shop website. I want to make that when the customer clicks on the icon, for example windows7 , 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 windows7 it opens to me the page I want, but from the top. I'am using the following code:

 <script>
     $("div.haha").tabs("img.one > div", {effect: 'ajax'});
 </script>

i just want it to change content and not to start from top

<div id="haha">
    <a href="product1.html"><img class="one" src="imgs/product1.png"></a>
    <a href="#"><img class="two" src="imgs/product2.png"></a>
    <a href="#"><img class="three" src="imgs/product 3.png"></a>
    <a href="#"><img class="four" src="imgs/product4.png"></a>
</div>

Answer 1

Actually to access div with "haha" id you should use

$("div#haha")

selector.

Answer 2

I am changing the code, because I had this code on hand and it works pretty well from what I've seen and appears to fit all your needs.

Javascript: (tested with jquery 1.9.1)

<script type="text/javascript">
$(function(){

  $("a[rel='haha']").click(function(e){
    e.preventDefault();
    /*
    if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
    if commented, html5 nonsupported browers will reload the page to the specified link.
    */

    //get the link location that was clicked
    pageurl = $(this).attr('href');

    //to get the ajax content and display in div with id 'haha'
    $.ajax({url:pageurl+'?rel=haha',success: function(data){
      $('#haha').html(data);
    }});

    //stop refreshing to the page given in
    return false;

  });

});

</script>

html example:

This is the code outside the div.  This shouldnt be effected.

<br /><br />
Here are the links outside the div to show you how it works.  IMG 2 will refresh page and change url because rel="haha" is missing from the url<br />
<a href="page2.php" rel="haha">IMG 1</a>
<a href="page2.php">IMG2 - NO REL</a> 
    <a href="../index.php">IMG3</a>
    <a href="http://www.kygar.com/code/haha.php">RESET</a>


<br />
<br />
<br />
<div id="haha" style="border: 1px solid #ccc;">
    <a href="../index.php" rel="haha">IMG1</a>
    <a href="../services.php" rel="haha">IMG2</a>
    <a href="http://www.gmail.com">IMG3 - NO REL</a>
</div>

Just know, any link you want to load into the div needs a rel="haha" (which can be changed to whatever you want to call it). If you want the page to load completely (like changing pages), just leave out the rel="haha" from the url.

Demo of how the code works: http://kygar.com/code/haha.php