顯示隱藏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> 
}