Novice question I guess:

The Scenario:
I have an asp page that contains 6 divs and 6 hyperlinks which are linked to javascript function:

function showdiv(divname)
{
   hideallcontentdivs();
   var targetdiv = document.getElementById(divname);
   targetdiv.style.display="block";
}

var alldivs=new Array();
function hideallcontentdivs()
{
   alldivs=document.getElementsByTagName("div");
   for(var i=0; i<alldivs.length;i++)
   {
      if(alldivs[i].className=="content")
      {
         alldivs[i].style.display="none";
      }
   }
}

ImageButton:

<a href="" onclick="showdiv('item1');"><img alt="alternate_text" src="imagesource" border="0px" /></a>

the divs have id's: item1, item2....item6 and the hyperlink specify to the javascript function the id of the div that needs to displayed.

The Problem:
Whenever I click on an hyperlink, the effect that I want is achieved but the page reloads too. Don't really know where I'm going wrong but if anyone could guide me in the right direction, I'll be very very thankful.

Novice question I guess:

The Scenario:
I have an asp page that contains 6 divs and 6 hyperlinks which are linked to javascript function:

function showdiv(divname)
{
   hideallcontentdivs();
   var targetdiv = document.getElementById(divname);
   targetdiv.style.display="block";
}

var alldivs=new Array();
function hideallcontentdivs()
{
   alldivs=document.getElementsByTagName("div");
   for(var i=0; i<alldivs.length;i++)
   {
      if(alldivs[i].className=="content")
      {
         alldivs[i].style.display="none";
      }
   }
}

ImageButton:

<a href="" onclick="showdiv('item1');"><img alt="alternate_text" src="imagesource" border="0px" /></a>

the divs have id's: item1, item2....item6 and the hyperlink specify to the javascript function the id of the div that needs to displayed.

The Problem:
Whenever I click on an hyperlink, the effect that I want is achieved but the page reloads too. Don't really know where I'm going wrong but if anyone could guide me in the right direction, I'll be very very thankful.

• javascript
• asp
• animation
• html

• You are using an anchor tag. But, you say you are using a ASP.NET ImageButton control. The former is used to redirect to any url. – pavanred Commented Aug 18, 2010 at 13:26

5 Answers 5

Just return false on click

onclick="showdiv('item1');return false;"

Update:I just point the issue :), you can return the false where ever you like.

onclick="return showdiv('item1');"

and say to showdiv() to return false

You should add return false to your onclick handler. This prevents the default behaviour of the link.

A better solution would be to use jQuery or some other library and attach the event to the element. They also contain special functions to prevent the default behaviour:

Html:

<a id="button1" href="#"><img alt="alternate_text" src="imagesource" /></a>

Javascript/jQuery:

$('#button1').click(function(event) {
    $('div').hide();        // hides all divs
    $('#div1').show();      // shows the div with the id 'div1'
    event.preventDefault(); // prevents postback
});

always, return false :)

but i'd rather put it in the function

function showdiv(divname)
{
   hideallcontentdivs();
   var targetdiv = document.getElementById(divname);
   targetdiv.style.display="block";
   return false;
}

+1 for Aristos' answer, although if you refactor the return false; to the end of the showdiv function you want have to update all the links.

return false is the key, as the other answers have said.

Just to add my tuppence though: you don't really need to use an anchor here and imho it's not good semantic style. Just use a span or div instead, and then the problem goes away.