jQuery如何控制a标签跳转，小白也能看懂

2024-01-08 09:57:47

作为一名网站管理员或运营人员，您可能经常需要在同一个网页上，让同一个链接根据不同的条件跳转到不同的界面。例如，让老师和学生在同一个界面上点击同一个链接，分别跳转到不同的界面；或者让电商网站的用户在点击购买按钮后，根据其身份跳转到不同的支付界面。

这种需求可以通过 JavaScript 库 jQuery 来轻松实现。以下内容将逐步介绍使用 jQuery 控制标签跳转的四种方法，并提供详细的代码示例。

方法一：使用  方式

<a id="aLink">跳转到界面1</a>

$("#aLink").click(function() {
  // 判断用户身份
  if (user.身份 == "老师") {
    // 跳转到界面1
    window.location.href = "界面1.html";
  } else if (user.身份 == "学生") {
    // 跳转到界面2
    window.location.href = "界面2.html";
  }
});

方法二：使用  方式

<a href="javascript:jump()">跳转到界面1</a>

function jump() {
  // 判断用户身份
  if (user.身份 == "老师") {
    // 跳转到界面1
    window.location.href = "界面1.html";
  } else if (user.身份 == "学生") {
    // 跳转到界面2
    window.location.href = "界面2.html";
  }
}

方法三：使用  方式

<a onclick="jump()">跳转到界面1</a>

function jump() {
  // 判断用户身份
  if (user.身份 == "老师") {
    // 跳转到界面1
    window.location.href = "界面1.html";
  } else if (user.身份 == "学生") {
    // 跳转到界面2
    window.location.href = "界面2.html";
  }
}

方法四：使用  方式

<a href="#">跳转到界面1</a>

$("a").click(function(e) {
  // 阻止默认跳转行为
  e.preventDefault();

  // 判断用户身份
  if (user.身份 == "老师") {
    // 跳转到界面1
    window.location.href = "界面1.html";
  } else if (user.身份 == "学生") {
    // 跳转到界面2
    window.location.href = "界面2.html";
  }
});