表单登录不与锚#工作

FORM Login not working with Anchor #

本文关键字：工作 登录 表单      更新时间：2023-09-26

我有以下表单提交代码

<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

如果下面的代码把#放在页面的末尾，那么你可以让它返回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

中提到的超链接

相关文章：