Question

我在这个网页上工作：

单击“Iniciasesió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);
});

Answer 2

跨度位于锚元素内，href属性设置为"" - 这指的是当前网站，并在点击时有效地重新加载页面。

在没有实际链接到另一个网页时，你应该真的避免使用锚点。相反，您应该将其更改为div（您可以设置样式以显示带cursor: pointer;的指针）。

但是，如果确实想要使用锚点，您可以像这样更改href属性：

然后确保您的javascript返回false：

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

Answer 3

替换：

<a href="" id="login-dialog-button-close">
    <span class="glyphicon glyphicon-remove"></span>
</a>

有了这个：

<a href="javascript:void(0);" id="login-dialog-button-close">
    <span class="glyphicon glyphicon-remove"></span>
</a>

问题是因为链接的href属性为空。使用javascript: void(0);中的#或href将解决此问题。

Jquery链接重新加载页面

3 个答案: