关于<a href='javascript:function()'>

最新推荐文章于 2025-04-16 10:23:43 发布
转载 最新推荐文章于 2025-04-16 10:23:43 发布 · 682 阅读 · 0

本文介绍了如何使用JavaScript来处理HTML中的链接行为，包括通过设置href属性为javascript:void(0)或javascript:;来阻止默认的链接跳转行为，并探讨了onclick事件与href属性之间的执行顺序及其应用场景。

<a href='javascript:function()'>

这样写是为了让这个链接不要链接到新页面转而执行一段js代码。和onclick能起到同样的效果，一般来说，如果要调用脚本还是在onclick事件里面写代码，而不推荐在href='javascript:function()' 这样的写法，因为 href 属性里面设置了js代码后，在某些浏览器下可能会引发其他不必要的事件。造成非预期效果。

而且 onclick事件会比 href属性先执行，所以会先触发 onclick 然后触发href，所以如果不想页面跳转，可以设置 onclick里面的js代码执行到最后返回一个false，这样 href 里面的东西就不会执行了。

在ajax应用程序中，多写着下面的这样 ，以表示这个链接不跳转，而执行一段js脚本。

<a href="javascript:void(0);" onclick="function()"></a>

或者

<a href="javascript:;" onclick="function()"></a>

void(0) 只是用来计算一个空值，其实也是什么事情都不做，而分号“;”则表示是一个空的js语句，这样就不会有任何其他跳转发生了，而且W3C标准不推荐在href里面执行javascript语句，所以还是用 onclick事件触发吧

前端界面导航栏的下拉列表使用js操作显示
qq_40825627的博客
12-12 1195
先来看成果图 html代码： &lt;nav&gt; &lt;ul class="nav"&gt; &lt;li class="dropDowm"&gt; &lt;a href="javascript:;" class="dropdown-toggle"&gt;
jqGrid 展示数据、获取查询条件进行查询案例
us2019的博客
10-10 2188
如图，用jqgrid实现 数据的展示 html: <div class="gridPanel panel-collapse collapse in" id="cis_grid" style="width:99%"> <table id="gridList"></table> <div id="gridPag...
<a href='javascript:function()'>
yingmu3630的专栏
08-20 115
这样写是为了让这个链接不要链接到新页面转而执行一段js代码。和onclick能起到同样的效果，一般来说，如果要调用脚本还是在onclick事件里面写代码，而不推荐在href='javascript:function()' 这样的写法，因为 href 属性里面设置了js代码后，在某些浏览器下可能会引发其他不必要的事件。造成非预期效果。而且 onclick事件会比 href属性先执行，所以会先触发 ...
关于<a href='javascript:function()'>的使用
叶落无痕的博客
05-02 1万+
这样写是为了让这个链接不要链接到新页面转而执行一段js代码。 和onclick能起到同样的效果，一般来说，如果要调用脚本还是在onclick事件里面写代码， 而不推荐href='javascript:function()' 这样的写法， 因为href属性里面设置了js代码后，在某些浏览器下可能会引发其他不必要的事件。 而且onclick事件会比href属性先执行，所以会先触
a标签的href="javascript:function()"
透明大脑
06-28 4831
Document         点我   来吧      function s(){    var theVar=document.getElementsByTagName("a")[0].href;   alert(theVar); alert(typeof(theVar)); return false;  }  function add(id){  
js中，使用location.href 传多个参数的问题
stay hungry,stay foolish!
05-12 1万+
我的案例：正确写法
javascript学习笔记——如何修改<a href="#">url name</a>
物联网 IoT 经验分享
06-02 1万+
0.前言     使用了一段时间javascript，再花了点时间学习了jquery，但是总是感觉自己很"迷糊"，例如url name中，如果修改href中的“#”应如何编写代码，如果修改url name应如何编写代码。再加上javascript和jquery操作方法略有不同，所以我就更“迷糊”了。     【说明】     曾经使用关键词——“innerHTML和value区别”，在百度和
a href=#与 a href=javascript:void(0) 的区别
u010552788的专栏
10-24 9308
javascript:void(0)的意思就是什么也不做！他不是页面URL，而是一个javascript语句void(0)，void是一个操作符，该操作符指定要计算一个表达式但是不返回值，这个要计算的表达式是“0”，所以，这个基本是坑爹的写法，完全是糊弄浏览器的。 如果你鼠标悬停于一个链接上，在浏览器底部状态栏上显示该链接的目标地址是这个的话，说明这个网页的编写者希望这个链接被点击时不是直接跳转
<a>标签中href="javascript:;"
时清云的博客
03-28 1555
标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。这里的href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页
javascript:void(0)用法|常见问题浅析
热门推荐
MIT计算认知研究院特聘研究员，DeepMind超对称量子拓扑项目组首席架构师。
04-16 6万+
JavaScript是一种在web开发中常见的JavaScript语法用法，主要用于HTML元素（特别是链接标签）的href属性中，以实现某种功能而不触发页面跳转。
空链接 href=＂#＂与href=＂javascript-void(0)＂的区别.docx
11-24
document.querySelector('a[href="javascript:void(0)"]').addEventListener('click', function(e) { e.preventDefault(); // 阻止默认行为 console.log('点击事件被触发'); }); </script> </body> </html> ```...
JavaScript教程带你快速入门
OIqng的博客
09-03 2862
JavaScript 简介 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。 JavaScript 是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 JavaScript 用法 HTML 中的脚本必须位于 标签之间。 脚本可被放置在 HTML 页面的 和 部分中。 <script>标签 <script> 和 </script> 会告诉 JavaScript 在何处开始和结
selenium中(python):javascript显示错误问题解决方案
qq_38973060的博客
09-04 3623
参考文章：https://www.cnblogs.com/Lara1798/p/12942959.html 错误1：ElementClickInterceptedException: Message: element click intercepted: Element <a href="" ng-click="show_page_addexam()">... </a> is not clickable at point (459, 36) element.click..
基于Java实现的词法分析器生成器与扫描器项目_通过正则表达式定义词法规则并自动构建NFA和DFA状态机以生成高效词法分析代码的工具_用于编译原理课程实验教学和实际编程语言词法分析.zip
12-10
基于Java实现的词法分析器生成器与扫描器项目_通过正则表达式定义词法规则并自动构建NFA和DFA状态机以生成高效词法分析代码的工具_用于编译原理课程实验教学和实际编程语言词法分析.zip
阿里云盘之API接口源代码
12-10
关于 阿里云盘CLI。仿 Linux shell 文件处理命令的阿里云盘命令行客户端，支持JavaScript插件，支持同步备份功能，支持相册批量下载。 特色 多平台支持, 支持 Windows, macOS, linux(x86/x64/arm), android, iOS 等 阿里云盘多用户支持 支持备份盘，资源库无缝切换 下载网盘内文件, 支持多个文件或目录下载, 支持断点续传和单文件并行下载。支持软链接(符号链接)文件。 上传本地文件, 支持多个文件或目录上传，支持排除指定文件夹/文件（正则表达式）功能。支持软链接(符号链接)文件。 同步备份功能支持备份本地文件到云盘，备份云盘文件到本地，双向同步备份保持本地文件和网盘文件同步。常用于嵌入式或者NAS等设备，支持docker镜像部署。 命令和文件路径输入支持Tab键自动补全，路径支持通配符匹配模式 支持JavaScript插件，你可以按照自己的需要定制上传/下载中关键步骤的行为，最大程度满足自己的个性化需求 支持共享相册的相关操作，支持批量下载相册所有普通照片、实况照片文件到本地 支持多用户联合下载功能，对下载速度有极致追求的用户可以尝试使用该选项。详情请查看文档多用户联合下载 如果大家有打算开通阿里云盘VIP会员，可以使用阿里云盘APP扫描下面的优惠推荐码进行开通。 注意：您需要开通【三方应用权益包】，这样使用本程序下载才能加速，否则下载无法提速。 Windows不第二步打开aliyunpan命令行程序，任何云盘命令都有类似如下日志输出 如何登出和下线客户端 阿里云盘单账户最多只允许同时登录 10 台设备 当出现这个提示：你账号已超出最大登录设备数量，请先下线一台设备，然后重启本应用，才可以继续使用 说明你的账号登录客户端已经超过数量，你需要先登出其他客户端才能继续使用，如下所示
制造企业IT规划与ERP建设方案.pptx
最新发布
12-10
制造企业IT规划与ERP建设方案.pptx
遗传算法生成满足形状约束的对抗.zip
12-10
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
<a href="javascript:;" data-page="1">1</a> js代码实现跳转
11-28
在网页中，要实现类似 `<a href="javascript:;" data-page="1">1</a>` 的跳转功能，可借助 JavaScript 来完成。以下是几种常见的实现方式： ### 1. 通过监听点击事件并跳转页面 可以给链接添加一个点击事件监听器，在事件处理函数里依据 `data-page` 属性的值来进行页面跳转。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="javascript:;" data-page="1">1</a> <script> const link = document.querySelector('a[data-page="1"]'); link.addEventListener('click', function () { const page = this.dataset.page; // 这里可以根据 page 的值进行页面跳转，例如跳转到对应的页面 window.location.href = `page${page}.html`; }); </script> </body> </html> ``` 在上述代码中，首先通过 `document.querySelector` 选取具有 `data-page="1"` 属性的链接元素，接着给该链接添加一个点击事件监听器。在事件处理函数中，获取 `data-page` 属性的值，然后使用 `window.location.href` 实现页面跳转。 ### 2. 使用内联事件处理函数 也可以直接在 HTML 标签里使用内联事件处理函数来实现跳转。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="javascript:;" data-page="1" onclick="goToPage(this.dataset.page)">1</a> <script> function goToPage(page) { window.location.href = `page${page}.html`; } </script> </body> </html> ``` 在这个例子中，给链接添加了一个 `onclick` 事件处理函数 `goToPage`，并将 `data-page` 属性的值作为参数传递给该函数。在 `goToPage` 函数中，使用 `window.location.href` 实现页面跳转。 ### 3. 重定向到其他网站 若要重定向到其他网站，可直接在事件处理函数中设置 `window.location.href` 为目标网站的 URL。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="javascript:;" data-page="https://www.example.com">Go to Example</a> <script> const link = document.querySelector('a[data-page]'); link.addEventListener('click', function () { const url = this.dataset.page; window.location.href = url; }); </script> </body> </html> ``` 此代码中，`data-page` 属性的值为目标网站的 URL，点击链接时，会跳转到该 URL 对应的页面。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值