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有id：item1，item2 .... item6，超链接为javascript函数指定需要显示的div的id。

问题：
每当我点击超链接时，都会实现我想要的效果，但页面也会重新加载。我真的不知道自己哪里出错了，但如果有人能指引我走向正确的方向，我会非常感激。

Answer 1

点击

时返回false

onclick="showdiv('item1');return 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

对于Aristos的答案，

+1，但如果您将return false;重构为showdiv函数的末尾，则必须更新所有链接。

Answer 5

正如其他答案所说，

return false是关键。

只是为了添加我的tuppence：你真的不需要在这里使用锚点，而且它不是很好的语义风格。只需使用span或div，然后问题就会消失。

asp.net页面重新加载javascript onclick函数

5 个答案: