Jquery 链接重新加载页面

Question

我正在处理此网页:

http://sociedadmicologicasegoviana.com/

当单击“Inicia sesión”顶栏按钮时，会出现一个隐藏的 div，但当您想关闭图像时，它会重新加载页面。有谁知道为什么吗？

下面的代码是:

HTML:

<div id="login">

<div class="row" id="login-dialog-close">
    <div class="col-xs-12">
        <a href="" id="login-dialog-button-close"><span class="glyphicon glyphicon-remove"></span></a>
    </div>
</div>

<div class="row login-div">
        <div class="col-xs-10 col-xs-offset-1 col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
            <?php echo do_shortcode("[swpm_login_form]"); ?>
        </div>
</div>

JQUERY:

jQuery(document).ready(function($){

$("#login").hide();

$("#login-button").click(function(){
    $("#login").show(500);
});

$("#login-dialog-button-close").click(function(){
    $("#login").hide(500);
});

});

我无法理解这种行为，因为它不是一个按钮，只是一个跨度..

最诚挚的问候!

Answer 1

由于#login-dialog-button-close是一个链接，因此单击它就会跟随该链接。您可以通过以下几种方式来防止这种情况:

• 将 href="" 更改为 href="#" 或 href="javascript:void(0)"。

• 在处理程序中调用 event.preventDefault()。

  $("#login-dialog-button-close").click(function(e) {
      e.preventDefault();
      $("#login").hide(500);
  });