Page scrolls down when clicking on a link

I have a problem with pages scrolling down when clicking on my links. I'm pretty sure it's because the browser thinks the link is supposed to be an anchor to a certain area on the page.

I'm using this jquery code to hide the main div and show the div corresponding to the link clicked. The main info div and main info2 divs are the same in css. The only thing different is the text inside.

$(document).ready(function(){
$("#home").click(function(){
 $("#main_info2").hide();
 $("#main_info").show();
});
$("#info").click(function(){
 $("#main_info").hide();
 $("#main_info2").show();
});
$("#gyms").click(function(){
 $("#main_info").hide();
 $("#main_info2").show();
 });
$("#contact").click(function(){
 $("#main_info").hide();
 $("#main_info2").show();
});
});

Here is my navigation list:

<ul>
  <li><a href="#home" id="home"><img src="main home page/purhome.jpg"></a></li>
  <li><a href="#info" id="info"><img src="main home page/purinfo.jpg"></a></li>
  <li><a href="#gyms" id="gyms"><img src="main home page/purgyms.jpg"></a></li>
  <li><a href="#contact" id="contact"><img src="main home page/purcontact.jpg"></a></li>

When I click on the info link for example the home div hides and the info div is shown, but the page scrolls down due to the href="#info". If I change it to href="#" it works fine without scroll, however, the browser url does not reflect the div that is showing if only using the "#".

For example, I want the browser to show http://google/index.php#info and not just http://google/index.php#.

Any ideas?

Solution

Here's your problem:

In this line:

<a href="#home" id="home"><img src="main home page/purhome.jpg"></a>

You are setting up a link which indeed scrolls to a certain area on the page, in this case to itself.

href="#home" means: when clicked on this link make the element with the id of home visible.

The actual link which is clicked, has the id of home.

So it ensures that whatever is inside itself is visible, browsers usually scroll down the page to the specific element with the specified id. This explains the behaviour.

In your case you can just get rid of the href attribute on the links, that should fix it.

Edit

The easiest way for you to get the desired behaviour is to just change your id's to something like this:

HTML

<ul>
  <li><a href="#home" id="home-link"><img src="main home page/purhome.jpg"></a></li>
  ...
</ul>

JavaScript

$("#home-link").click(function() {
  $("#main_info2").hide();
  $("#main_info").show();
});
...

And you could even change the id of main_info to home to ensure main_info (or home then) is visible after clicking the link, if that is the kind of behaviour you are after.

Edit 2 - reading the hash solution

HTML

<ul>
  <li><a href="#home"><img src="main home page/purhome.jpg"></a></li>
  ...
</ul>
<div id="home">This is the tab content for the "home" tab.</div>

No id needed on the link, but set one on the <div> or on whatever element you use to create your tab content. Now the href attribute on the link will ensure the right thing happens in combination with the JavaScript below which catches the click and shows the right tab based on the hash value .

JavaScript

$("a").click(function() {
  // Hide all tab content elements.
  $('some-selector-which-selects-all-tab-content-elements').hide(); 
  // Show only the tab content element with an id equal to the hash value.
  $(window.location.hash).show();   
});