<!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>
一、重点:
return false阻止跳转,return true继续跳转- 不能把onlick写在a标签里(否则return false失效),要用js中对onclick赋值的方式定义
- 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>