title: Replacing a Div With Jquery - Screen Moves
body: <p>I want to change my div content on the click of a link, this currently works by using an id to show hide the div on content.</p>
  
  <p>However the screen moves to the top of the clicked div - I am aware thats because its linked to moving to the location of the id, is there a way that no matter how far the user has scrolled down the page when they are able to click that the screen won't shift to the top of the div?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;li&gt;&lt;a href="www.example.com/cakes.php#wedding-tab" onClick="showhide('wedding')" title="Wedding Cakes" class="tabs" id="wedding-tab"&gt;Wedding Cakes&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.example.com/cakes.php#celebration-tab" onClick="showhide('birthday')" title="Birthday Cakes" class="tabs" id="celebration-tab"&gt;Birthday Cakes&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="http://www.example.com/cakes.php#christening-tab" onClick="showhide('christening')"title="Christening Cakes" class="tabs" id="christening-tab"&gt;Christening Cakes&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="http://www.example.com/cakes.php#cupcakes-tab" onClick="showhide('occassion')"title="Occassion Cakes" class="tabs" id="cupcakes-tab"&gt;Occasion Cakes&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;div id="wedding"&gt;
  content
  &lt;/div&gt;
  
  &lt;div id="birthday"&gt;
  content
  &lt;/div&gt;
  
  &lt;div id="christening"&gt;
  content
  &lt;/div&gt;
  
  &lt;div id="occassion"&gt;
  content
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
      var h1 = $("#wedding").height();
      var h2 = $("#birthday").height();
       var h3 = $("#christening").height();
       var h4 = $("#occassion").height();
      $("#wedding,#birthday,#christening,#occassion").height(Math.max(h1, h2, h3, h4));
      $("#birthday").hide();
      $("#christening").hide();
      $("#occassion").hide();
  });
  
  $("#wedding-tab").live('click', function() {
      $("#wedding").show();
      $("#birthday").hide();
       $("#christening").hide();
        $("#occassion").hide();
  });
  
  $("#celebration-tab").live('click', function() {
      $("#wedding").hide();
      $("#birthday").show();
       $("#christening").hide();
        $("#occassion").hide();
   });
  
  $("#christening-tab").live('click', function() {
       $("#wedding").hide();
       $("#birthday").hide();
       $("#christening").show();
       $("#occassion").hide();
  });
  
  $("#cupcakes-tab").live('click', function() {
      $("#wedding").hide();
      $("#birthday").hide();
       $("#christening").hide();
        $("#occassion").show();
  });
  </code></pre>