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

但是，如果页面网址变得类似（在网址后面有锚＃）

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
中提到的超链接

FORM登录无法使用Anchor＃

1 个答案: