JavaScript 实现 HTML <a 标签不跳转外， data-value属性传值
在网页设计中，经常需要用到超链接。而在超链接中，跳转是一个非常常见的需求。通常情况下，点击一个超链接会跳转到指定的页面。但在某些情况下，我们希望做到点击链接不跳转，只是执行某个脚本或者实现页面局部滚动等效果。在这种情况下，我们需要实现 HTML 不跳转的效果。本文将讲解 HTML 不跳转的实现方法。
一、什么是 HTML 不跳转
HTML 不跳转指的是当用户点击超链接时，页面不会跳转到链接指向的页面，而是在当前页面中进行后续操作。HTML 不跳转通常用于实现以下需求：
- 部分刷新，动态加载内容。
- 编辑模式和预览模式切换。
- 动态控制页面元素的显示和隐藏。
- 局部滚动。
- 函数执行等场景。
二、HTML 不跳转的实现方法
实现 HTML 不跳转有多种方法，下面我们将讲述其中两种方法。
- 使用 JavaScript 实现 HTML 不跳转
实现 HTML 不跳转的一种方法是使用 JavaScript。在 a 标签元素的 onclick 事件中调用 JavaScript 函数，通过 JavaScript 函数实现页面局部刷新等效果。
HTML 代码如下所示：
- <a href="#" onclick="javascript：alert('这是一个弹窗')">点击这里不跳转</a>
在上面的代码中，通过将 href 属性设置为 "#"，使得点击链接时不会跳转到任何页面。
通过调用 onclick 事件，在该事件的处理函数中，我们可以实现将页面局部刷新等效果。
比如，在上面的代码中，我们通过 onclick 事件绑定一个 JavaScript 函数，当用户点击链接时，会弹出一个提示窗口。
JavaScript 代码如下所示：
- <script>function myFunction(){alert("这是一个弹窗");}</script>
- 使用 data 属性实现 HTML 不跳转
除了使用 JavaScript 实现 HTML 不跳转外，另一种方法是使用 data 属性。使用 data 属性，可以将需要向页面传递的参数放入 data 属性中，以便在页面中进行解析。
HTML 代码如下所示：
-
<a href="#" data-value="这是一个传递参数实例">点击这里不跳转</a>
在上面的代码中，我们将 href 属性设置为 "#"，使得点击链接时不会跳转到任何页面。然后，我们将需要传递的参数通过 data-value 属性传递给页面。
通过 jQuery 或者 JavaScript 等框架，我们可以在该链接的 onclick 事件中获取 data-value 属性的值，并进行相应的处理。
JavaScript 代码如下所示：
-
<script>$(document).ready(function(){$("a").click(function(){var value=$(this).data("value");alert(value);});});</script>
在上面的代码中，我们通过 jQuery 获取 a 标签元素，并在该元素的 onclick 事件中解析 data-value 属性的值，并弹出一个提示窗口。
以上代码需要引入jQuery：
<script src="http://code.jquery.com/jquery-latest.js"></script>