jquery a 链接点击弹框 alter

原创

mob64ca12d9081f 2023-11-18 10:52:26 ©著作权

文章标签 HTML jQuery 检查链接 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d9081f的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现“jquery a 链接点击弹框 alter”的流程

流程图

flowchart TD;
    A[点击 a 链接] --> B{检查链接是否生效};
    B --> C{弹出alter窗口};
    C --> D[点击确定];

步骤

步骤	操作
1	给 a 标签添加点击事件
2	检查链接是否生效
3	弹出 alter 窗口
4	点击确定关闭弹窗

代码实现

HTML

首先，需要在HTML中引入 jQuery 库，并创建一个 a 标签：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery a链接点击弹框</title>
    <script src="
</head>
<body>
    <a rel="nofollow" href="#" id="myLink">点击我</a>
</body>
</html>

JavaScript

然后，使用以下代码实现“jquery a 链接点击弹框 alter”：

$(document).ready(function() {
    // 给 a 标签添加点击事件
    $("#myLink").click(function(event) {
        event.preventDefault(); // 阻止默认链接跳转行为

        // 检查链接是否生效
        if ($(this).attr("href") === "#") {
            // 弹出 alter 窗口
            alert("Hello, World!");

            // 点击确定关闭弹窗
            $(document).on("click", ".alert button", function() {
                $(".alert").remove();
            });
        }
    });
});

代码解释：

$(document).ready(function() {...}); - 确保所有的 DOM 元素都已加载完毕后执行代码。
$("#myLink").click(function(event) {...}); - 给 id 为 "myLink" 的 a 标签添加点击事件。
event.preventDefault(); - 阻止默认链接跳转行为。
$(this).attr("href") - 获取当前点击的 a 标签的 href 属性值。
alert("Hello, World!"); - 弹出 "Hello, World!" 的 alter 窗口。
$(document).on("click", ".alert button", function() {...}); - 给 alter 窗口中的按钮添加点击事件。
$(".alert").remove(); - 移除 alter 窗口。