a标签判加入条件后确定是否跳转---

212 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <a id="btn" href="https://www.baidu.com">点击跳转</a>
    <script>
        let flag = false; //条件
        let btn = document.getElementById("btn")
        btn.onclick = function check() {
            if (flag) {//满足条件
                flag = true
            } else {//不满足条件
                flag = false
            }
            return flag;
        }
    </script>
</body>
</html>
一、重点:
  1. return false阻止跳转,return true继续跳转
  2. 不能把onlick写在a标签里(否则return false失效),要用js中对onclick赋值的方式定义
  3. onclick赋值的方法必须具名(否则return false也会失效)

注:不加判断条件写法 切记标签内不加属性target="_blank"否则默认打开空白页

    <a href="javascript:void(0);" >点此无反应javascript:void(0)</a>
    <a href="javascript:;" >点此无反应javascript:</a>
         标签事件onclick,阻止其默认行为。如:
    <a href="" οnclick="return false;">return false;</a>
    <a href="#" οnclick="return false;">return false;</a>
二、jquery写法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script> //引入jq
</head>
<body>
    <a id="btn" href="https://www.baidu.com">点击跳转</a>
    <script>
        let learnerId = false;//未登录
        //页面上的按钮点击先判断是否注册或者登录
        $("#btn").click(function () {
            var href = $(this).attr("href");
            if (!learnerId) {//!learnerId 取反 则满足未登录
                alert('您还没有登录')
                return false;
            }
        });
    </script>
</body>

</html>