显示隐藏div成功，但点击页面刷新。剃须刀

Question

我可以成功显示/隐藏div onclick。 但onclick div显示一秒钟，页面刷新。 我已使用JavaScript。 代码：

 @{var Count = 0;} 
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0)) 
    { 
<div id="@Count" style="display: none;"> 
<input type="submit" id="reply" class="reply-link" onclick="return showHide(@Count);" value="Reply" /> 
@{Count++; } 
</div> 
} 


<script type="text/javascript"> 
function showHide(Count) { 
     var ele = document.getElementById(Count); 
     if (ele.style.display == "block") { 
      ele.style.display = "none";   
     } 
     else { 
      ele.style.display = "block"; 
     } 
    } 
</script> 

Answer 1

如果提交按钮是<form>里面你需要return false从showHide如果你不想页面提交后点击它：

<script type="text/javascript"> 
function showHide(Count) { 
    var ele = document.getElementById(Count); 
    if (ele.style.display == "block") { 
     ele.style.display = "none";   
    } 
    else { 
     ele.style.display = "block"; 
    } 

    return false; // <-- that's important to prevent the page from submitting 
} 
</script> 

另请注意，id属性不能以HTML中的数字开头。所以请修正您的标记：

@{var Count = 0;} 
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0)) 
{ 
    <div id="mydiv_@Count" style="display: none;"> 
     <input type="submit" id="reply" class="reply-link" onclick="return showHide('mydiv_@Count');" value="Reply" /> 
     @{Count++; } 
    </div> 
} 


<script type="text/javascript"> 
function showHide(id) { 
    var ele = document.getElementById(id); 
    if (ele.style.display == "block") { 
     ele.style.display = "none";   
    } 
    else { 
     ele.style.display = "block"; 
    } 
    return false; 
} 
</script> 

Answer 2

这是因为您的页面正在提交。尝试使用<input type="button"...>代替<input type="submit"...>

区别就在这里的：Difference between <input type='button' /> and <input type='submit' />

而且你的控件ID不能以数字开头，并且必须是唯一的：

@{var Count = 0;} 
foreach (var commentlist in Model.Comments.Where(x => x.CommentParentID == 0)) 
{ 
    <div id="div_@Count" style="display: none;"> 
     <input type="submit" id="reply_@Count" class="reply-link" onclick="return showHide('mydiv_@Count');" value="Reply" /> 
     @{Count++; } 
    </div> 
}