📅 最后修改于: 2023-12-03 15:02:15.169000 🧑 作者: Mango
在网页开发中，经常需要动态更改链接的 href 值，以实现特定功能，比如单页应用的页面切换。通过 jQuery 库，我们可以很方便地实现这一功能。
下面是一个示例代码，通过点击一个链接按钮，更改另一个链接的 href 值。
<!DOCTYPE html>
<html>
<head>
<title>jQuery 更改 href 值 - JavaScript</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#btn').click(function(){
$('#link').attr('href', 'https://www.google.com');
});
});
</script>
</head>
<body>
<a id="link" href="https://www.baidu.com">百度</a>
<button id="btn">更改链接</button>
</body>
</html>
这段代码主要由两个部分组成：HTML 和 JavaScript。
在 HTML 部分，我们定义了一个链接和一个按钮，如下所示：
<a id="link" href="https://www.baidu.com">百度</a>
<button id="btn">更改链接</button>
其中链接的 id 属性设置为 link，用于在 JavaScript 中引用该链接。按钮的 id 属性设置为 btn，用于绑定点击事件。
在 JavaScript 部分，我们引入了 jQuery 库，并使用 $(function(){...}) 方法在页面加载时执行一个函数。该函数主要分为两个部分：绑定点击事件和更改链接。
首先，我们使用 $('#btn').click(function(){...}) 方法为按钮绑定点击事件。当按钮被点击时，我们执行一个匿名函数，该函数中，我们使用 $('#link').attr('href', 'https://www.google.com') 方法更改链接的 href 属性为 https://www.google.com。
通过上面的示例代码，我们可以很方便地实现通过点击按钮更改链接的 href 值。在实际开发中，我们可以根据具体需求，灵活运用 jQuery 库，实现更多有趣的功能。