Перезагрузка страницы asp.net с помощью функции javascript onclick

Question

Вопрос новичка, я думаю:

Сценарий:
У меня есть страница asp.net, которая содержит 6 div и 6 гиперссылок, которые связаны с функцией JavaScript:

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>

элементы div имеют идентификаторы: item1, item2 .... item6 и гиперссылка указывает на функцию javascript идентификатор элемента div, который необходимо отобразить.*

Проблема:
Всякий раз, когда я нажимаю на гиперссылку, желаемый эффект достигается, но страница тоже перезагружается.Не знаю, куда я иду, но если бы кто-нибудь мог направить меня в правильном направлении, я был бы очень очень благодарен.

Answer 1

Просто верните false при нажатии

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

Обновление : я просто укажу на проблему :), вы можете вернуть false в любое время.

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

и сказать showdiv (), чтобы вернуть false

Answer 2

Вы должны добавить return false к своему обработчику onclick. Это предотвращает поведение ссылки по умолчанию.

Лучшим решением было бы использовать jQuery или какую-либо другую библиотеку и прикрепить событие к элементу. Они также содержат специальные функции для предотвращения поведения по умолчанию:

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
});

Answer 3

всегда, верните false:)

но я бы предпочел поставить его в функцию

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

Answer 4

return false является ключом, как сказали другие ответы.

Просто, чтобы добавить мое терпение, хотя: вам действительно не нужно использовать якорь здесь, и imho, это не хороший семантический стиль.Вместо этого просто используйте span или div, и тогда проблема исчезнет.

Answer 5

+ 1 для ответа Аристоса, хотя, если вы реорганизуете return false; до конца функции showdiv, вам нужно обновить все ссылки.