Javascript显示元素，隐藏元素页面加载.但它会恢复

Javascript show element, hide element on page load. But it reverts

本文关键字：元素 加载 恢复 显示 隐藏 Javascript      更新时间：2023-09-26

在页面加载时我想隐藏元素#buttonSaveArea，显示元素#buttonSaveShower。当点击#buttonSaveShower时，它应该隐藏，#buttonSaveArea应该出现。

问题是，$(document).ready一次又一次地被调用。如何绕过它?此外，当JavaScript被禁用时，我希望#buttonSaveArea从一开始就可见。

$(document).ready(function(){
  $("#buttonSaveArea").hide();
  $("#buttonSaveShower").click(function(){
    $("#buttonSaveArea").fadeIn();
    $("#buttonSaveShower").hide();
  });
});

<!------ The element that should show the button below ---------------->
<div class="button" id="buttonSaveShower" style="clear:both; margin-top:15px;">
    <a href="" style="width:50px !important;"> edytuj </a>
</div>
<!------ Button: save ---------------->
<div class="fbCenter" id="buttonSaveArea">
    <input type="submit" value="Zapisz" class="formButton"
       onmouseover="this.className+=' pressed'"
       onmouseout="this.className=this.className.replace(' pressed', '')"
    />
</div>

您应该使用event.preventDefault()

来阻止锚标记重新加载页面
$(document).ready(function(){
  $("#buttonSaveArea").hide();
  $("#buttonSaveShower").click(function(event){
    event.preventDefault();
    $("#buttonSaveArea").fadeIn();
    $("#buttonSaveShower").hide();
  });
});

同样，如果您想加载隐藏#buttonSaveArea的页面。你应该使用css默认隐藏它

#buttonSaveArea{
   display: none;
}

用<a href="#">代替<a href="">有帮助。谢谢大家的建议。

相关文章：