javascript 点击<a></a>标签时 不进行跳转页面的做法

最新推荐文章于 2023-06-02 18:17:28 发布
最新推荐文章于 2023-06-02 18:17:28 发布
阅读量1.9k 收藏
点赞数
分类专栏： javascript 
<head>
<script type="text/javascript">
function check(){
if (confirm("真的要跳转吗？"))
return true;
else return false;
}
</script>
</head>
<body>
<a οnclick="return check()"href="a.html">这个链接需要确认</a>
</body>

这样在点击链接的时候会弹出一个对话框，来确认是否需要跳转
另外如果不需要a链接的href属性，只是想出发onclick时间的话，可以写

<a οnclick="..." href='#'></a> #会滚动到页面顶部
或者

<a οnclick="..." href="javascript:void(0)"></a>


转载自：http://zhidao.baidu.com/link?url=L1YIfHysH4rWgsKi_QX1LQwi51kLu4cgL1CROC0X1-bCMfTOlUwR3nNZZmYQ1KJvpJUub8LdNo1SMqKliyi2Qa

参考：http://www.iteye.com/problems/39458

Coding-lover
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript入门
dahanhe的博客
11-18 377
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。
点击a链接，使用javacript:void(0)，不跳转路径，弹出弹框
weixin_43675173的博客
10-21 2480
空链接 javacript:void(0); 在使用<a>标签时，经常会绑定其他事件比如onclick，这时我们会给<a>标签的href属性赋值为“#”，“javacript:;”，“javacript:void(0);”等等。 一、href="javacript:;" 用这个的话会出现浏览器访问“javascript:;”这个地址的现象，所以任何情况下都不建议使用；...
a标签设置在当前页打开链接，不跳转，a标签target属性，a标签跳转方式怎么改变
程序员张礼奎的博客
08-07 6687
a标签的target的几个属性 _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self 这个目标的值对所有没有指定目标的 `<a>` 标签是默认目标，它使得目标文档载入并显示在相同的框架 或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 `<base>` 标签中的 target 属性一起使用。 _parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中， 那么它与目标 _self 等效
点击按钮或链接时不跳转只刷新页面
oe_luna的专栏
12-18 876
点击按钮或链接时不跳转只刷新页面，在某些情况下还是比较实用的，下面整理些不错的示例，感兴趣的朋友可以参考下 详细出处参考：http://www.jb51.net/article/42297.htm
【JS】实现 a 标签点击不跳转
最新发布
qq_45677671的博客
06-02 1946
js 实现 a 标签点击不跳转
鼠标悬停<a>标签效果
05-25
在网页设计中，鼠标悬停效果是提升用户体验的重要一环，尤其对于链接（<a>标签）来说，这种交互设计可以向用户明确指示可点击区域并预览相关信息。本话题我们将深入探讨“鼠标悬停<a>标签效果”的实现，以及如何通过...
a标签置灰不可点击的实现方法
08-31
在网页开发中，`<a>`标签是HTML中用于创建超链接的重要元素，它允许用户通过点击跳转到其他页面或者执行某些JavaScript操作。然而，有时候我们可能希望禁用这些链接，使其呈现为灰色（不可点击）状态，以防止用户...
A标签触发onclick事件而不跳转的多种解决方法
09-05
如果不需要A标签的默认行为，我们可以完全不使用A标签，而是使用其他HTML元素（如`<div>`或`<span>`），然后通过CSS样式使其看起来像链接，并通过JavaScript监听点击事件来触发所需的行为。这种方法比较灵活，但...
JavaScript实现通过select标签跳转网页的方法
11-25
本文将深入探讨如何使用JavaScript与HTML的`<select>`标签结合，实现在用户选择不同的选项时跳转到不同的网页。这对于创建动态菜单或者自定义导航链接来说是非常实用的。 一、当前页面直接跳转 在`<select>`标签中...
js a标签点击事件
11-30
在JavaScript和HTML交互中，`<a>`标签通常用于创建链接，但有时我们需要在点击`<a>`标签时不进行实际的页面跳转，而是执行一些JavaScript代码。这通常发生在我们想要实现自定义交互或者需要在用户点击时执行特定功能...
点击导航栏，页面不跳转，刷新内容
08-04
点击导航栏，页面不跳转，刷新内容,类似AJAX
（6）＜a＞标签如何实现点击既不刷新也不跳转的功能
Java田根旺
11-11 5334
一、<a>标签跳转页面 相信大家对于<a>标签跳转到一个新网页的写法不陌生吧，这里如下举个跳转到百度的例子。 <a href="https://www.baidu.com">点击跳转到百度</a> 二、a标签之js调用方式1：调用js的某个方法，不建议使用 代码书写方式一： <a href="javascript:alert(111);">点击</a> 代码书写方式二： <a href="javascript:
js打开新窗口与跳转页面的方法
No8g攻城狮的博客
12-11 457
1、超链接<a href="http://www.baidu.net" title="脚本之家">Welcome</a> 等效于js代码 window.location.href="https://www.baidu.com"; //在同当前窗口中打开窗口 2、超链接<a href="http://www.baidu.net" title="脚本之...
<a>标签中href="javascript:;"
しΙしΙ 的专栏
11-07 749
javascript:      表示 在触发
<a>标签中href="javascript:;"表示什么意思？？
SmileAngel521的博客
08-19 1051
标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。 这里的href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时
confirm点击之后跳转页面
lnmghh的博客
09-18 9370
confirm点击之后跳转页面
JS中点击a标签不跳转
weixin_33973609的博客
09-01 1835
在开发中发现，使用如下方式的链接。在Chrome中点击后不会做任何跳转或者打开新标签页，但在Firefox下会新开标签页。<a href=”JavaScript:void(0);”target=”_blank”>test</a>后经查找资料，发现需如下解决。通过 false;” href=”javascript:void(0);”target=”_...
优化下面这段代码 <!DOCTYPE html> <html> <head> <title>注册示例</title> <style> .container { display: flex; flex-direction: column; align-items: center; margin-top: 100px; } .btn { padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; margin-top: 20px; cursor: pointer; } </style> </head> <body> <div class="container"> <h1>欢迎来到注册页面</h1> <a href="#" class="btn" id="register-link">注册</a> </div> <script> // 获取注册链接 var registerLink = document.getElementById('register-link'); // 注册链接点击事件处理程序 registerLink.addEventListener('click', function(event) { // 阻止默认行为，避免直接跳转 event.preventDefault(); // 打开新标签页 var newTab = window.open('about:blank', '_blank'); // 在新标签页中添加内容 newTab.document.write('<h1>注册页面</h1>'); // 弹出注册失败提示框 var confirmResult = newTab.confirm('注册失败'); // 确定按钮点击事件处理程序 if (confirmResult) { // 关闭当前标签页，返回开始页面 window.close(); } }); </script> </body> </html>
05-29
以下是对代码的优化： 1. 使用外部样式表代替内部样式表，可以提高代码的可维护性。 2. 将 JavaScript 代码放置在 body 元素底部或使用 defer 属性，可以提高页面加载速度。 3. 为注册链接添加按钮样式，可以增强用户体验。 4. 为跳转链接添加 title 属性，可以增加网站的可访问性。 优化后的代码如下： ```html <!DOCTYPE html> <html> <head> <title>注册示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>欢迎来到注册页面</h1> <a href="#" class="btn" id="register-link" title="点击注册">注册</a> </div> <script defer src="script.js"></script> </body> </html> ``` ```css .container { display: flex; flex-direction: column; align-items: center; margin-top: 100px; } .btn { padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; margin-top: 20px; cursor: pointer; } ``` ```javascript // 获取注册链接 var registerLink = document.getElementById('register-link'); // 注册链接点击事件处理程序 registerLink.addEventListener('click', function(event) { // 阻止默认行为，避免直接跳转 event.preventDefault(); // 打开新标签页 var newTab = window.open('about:blank', '_blank'); // 在新标签页中添加内容 newTab.document.write('<h1>注册页面</h1>'); // 弹出注册失败提示框 var confirmResult = newTab.confirm('注册失败'); // 确定按钮点击事件处理程序 if (confirmResult) { // 关闭当前标签页，返回开始页面 window.close(); } }); ``` 这样的代码结构更加清晰、易读，且符合最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值