表单登录不使用Anchor #

Question

我有以下表格提交代码

<div class="top-links">
    <ul>
        <li><a href="javascript:void(0);">Sign In</a>
            <div class="top-link-section">
                <form id="top-login" role="form" action="">
                    <div class="input-group" id="top-login-username">
                        <input type="text" class="form-control" name="username" placeholder="Username" required>
                    </div>
                    <div class="input-group" id="top-login-password">
                        <input type="password" class="form-control" name="password" placeholder="Password" required>
                    </div>
                    <div class="input-group" id="top-login-remember">
                      <label><input type="checkbox" value="yes" name="remember_me">&nbsp; Remember me</label>
                    </div>

                    <button class="btn btn-danger btn-block" type="submit">Sign In</button>

                </form>
            </div>
        </li>
    </ul>
</div>

如果用户在登录前没有单击页面中的任何锚链接，则表单登录可以正常工作。

工质

 http://example.com/index.php

但是，如果页面url变成了类似的东西(在url地址后面有锚#)

http://example.com/index.php#

因为我有一些链接

<a href="#">Events</a>

如果用户在登录前单击事件以查看弹出式，登录表单将无法工作，我如何处理这样的场景，以确保登录仍然继续进行，即使在url地址。

--假设登录后总是返回到

example.com/index.php，但我更喜欢的是example.com而不是index.php

Answer 1

如果下面的代码将#放在页面的末尾，那么当用户单击此单击并打开弹出式窗口时，您可以使其返回false而不做任何操作。

<a href="#">Events</a>

您可以使用纯JS或jQuery来实现相同的功能。

所以修改这些元素的HTML，

<a href="#" onclick="return eventClickBtn();">Events</a> <!-- for plain JS --> 
<a href="#" class="eventCommonBtn">Events</a> <!-- for plain jQuery --> 

在JS端，您需要添加以下内容：

<script>
function eventClickBtn() {
    // Your logic to open popupbox
    return false;
}

// For jQuery
$('.eventClickBtn').click(function(e){
    e.preventDefault();
});
</script>

通过使用event.preventDefault();，事件的默认操作不会被触发，普通JS也是如此。如果您返回false，它将不会触发href中提到的超链接