Question

在页面加载时，我想隐藏元素#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>

Answer 1

您应该使用event.preventDefault()

停止锚标记重新加载页面

$(document).ready(function(){
  $("#buttonSaveArea").hide();

  $("#buttonSaveShower").click(function(event){
    event.preventDefault();
    $("#buttonSaveArea").fadeIn();
    $("#buttonSaveShower").hide();
  });
});

此外，如果您要加载隐藏#buttonSaveArea的网页。您应该使用css默认隐藏它

#buttonSaveArea{
   display: none;
}

Answer 2

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

Javascript显示元素，在页面加载时隐藏元素。但它还原

2 个答案: