开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js href如何不跳转页面

在JavaScript中，如果你想让一个<a>标签的href属性不触发页面跳转，有几种常见的方法：

1. 使用 `javascript:void(0);`

这是最常见的方法之一。void(0)会返回undefined，因此点击链接时不会发生任何事情。

<a href="javascript:void(0);" onclick="someFunction()">Click me</a>

2. 使用 `#`

你可以将href设置为#，这样点击链接时会跳转到页面的顶部，但不会加载新的页面。

<a href="#" id="myLink">Click me</a>

然后你可以使用JavaScript来阻止默认行为：

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  someFunction();
});

3. 使用 `event.preventDefault()`

你可以在点击事件中使用event.preventDefault()来阻止默认的跳转行为。

<a href="http://example.com" id="myLink">Click me</a>

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  someFunction();
});

4. 使用 `button` 元素

如果你不需要链接的语义，可以使用button元素，并通过CSS样式使其看起来像链接。

<button onclick="someFunction()">Click me</button>

5. 使用 `role="button"` 和 `tabindex`

如果你必须使用<a>标签，可以添加role="button"和tabindex属性，并使用JavaScript来处理点击事件。

<a href="#" role="button" tabindex="0" onclick="someFunction()" onkeypress="if(event.key === 'Enter') someFunction()">Click me</a>

优势

用户体验：防止不必要的页面跳转，提升用户体验。
功能扩展：可以在点击事件中添加更多的功能，如AJAX请求、表单提交等。

应用场景

单页应用（SPA）：在单页应用中，通常使用这种方法来处理导航和页面更新。
模态框：点击链接时显示模态框而不是跳转页面。
动态内容加载：通过AJAX加载内容，而不是刷新整个页面。

示例代码

以下是一个完整的示例，展示了如何使用event.preventDefault()来阻止默认的跳转行为，并在点击时执行自定义函数：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prevent Default Example</title>
</head>
<body>
  <a href="http://example.com" id="myLink">Click me</a>

  <script>
    document.getElementById('myLink').addEventListener('click', function(event) {
      event.preventDefault();
      alert('Link clicked, but no page jump!');
      // 这里可以添加更多的自定义逻辑
    });
  </script>
</body>
</html>

通过这些方法，你可以灵活地控制链接的行为，避免不必要的页面跳转，并在点击时执行自定义的JavaScript代码。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码

摘要腾兴网为您分享:PHP页面跳转 Js页面跳转代码，自动刷宝，中信金通，携程抢票，未来屋等软件知识，以及沃金汇，沃行讯通，securecrt.exe，我的世界变形金刚mod，一票通，农场小分队，手电筒...第一部分: JavaScript 跳转方法一: 复制代码代码示例: script language=javascript window.location= http://www.jbxue.com;...= “http://www.jbxue.com”; 方法三： (带进度条) 复制代码代码示例: 跳转到jbxue.com loading… size=46 name=chart> var bar=...bar<99){ setTimeout(“count()”,100); }else{ window.location = “http://www.jbxue.com/”; } } 第二部分: 页面跳转...复制代码代码示例: 第三部分: 动态页面跳转方法一: PHP 跳转复制代码代码示例: header(“location: http://www.jbxue.com”); ?

30.2K3 0

js跳转页面并刷新(本页面跳转)

window.navigate("index.jsp"); //navigate对象包含有关浏览器的信息，也可以作为页面跳转，后面直接加要跳转的地方。...history.back();//不刷新页面 2、Javascript刷新页面的常用方法： [javascript] view plain copy print?...秒后跳转到http://www.baidu.com页面 3.页面自动刷新js版 [javascript] view plain copy print?...刷新框架的脚本语句 //如何刷新包含该框架的页面用 [javascript] view plain copy print?...()">刷新 ) //如何刷新另一个框架的页面用 [javascript] view plain copy print?

23K1 0

JS跳转代码_js中跳转页面路径

一、常规的JS页面跳转代码 1、在原来的窗体中直接跳转用 2、在新窗体中打开页面用： 3、JS页面跳转参数的注解参数解释：第2种：第3种：第4种：第5种：三、页面停留指定时间再跳转（如3秒）...四、根据访客来源跳转的JS代码 1、JS判断来路代码此段代码主要用于百度谷歌点击进入跳转，直接打开网站不跳转： 2、JS直接跳转代码 3、ASP跳转代码判断来路 <% 　　if instr(Request.ServerVariables...<% 　　response.redirect(“http://www.at8k.com/”) 　　%> 五、广告与网站页面一起的JS代码 1、上面是广告下面是站群的代码 document.writeln...(“”); 2、全部覆盖的代码 document.write(“”); 3、混淆防止搜索引擎被查的js调用具体的展示上面是广告下面是站群的代码： var ss = ‘ <ifr’+‘ame scrolling...document.body.children[i].style.display=“non”+“e”; //} } }catch(e){} 　　 } 　　 },100); 　　}catch(e){} 六、页面跳出框架

17K3 0

JS实现页面跳转

框架中，处理完后，要刷新左页面，同时本页面也要跳转到另一个页面。...刷新用或者在页面的最后: //leftFrame指左边框架的名字 parent.leftFrame.location.reload...(); 接着的跳转就不能用服务器的语句了，必须用客户端的语句 Session["Loged"]=Textbox9.Text; JScript.Alert("登录成功！

15.8K6 0

js实现跳转页面

2015-04-09 01:12:05 页面跳转的方法有很多，如果你的页面是jsp页面，你可以在servlet中添加java代码来实现跳转，这里我就不多说了。...我要说的是在jsp页面通过js来实现页面跳转，下面请看代码按钮式： href...='http://www.ddhbb.com/'"> 链接式： href="javascript:history.go(-1)">返回上一步 href="">返回上一步直接跳转式： window.location.href='http://www.ddhbb.com';...开新窗口： href="javascript:" onClick="window.open('http://www.ddhbb.com/blog/guestbook.asp','','height

16.9K3 0

window location href页面跳转的几种用法及其延展「建议收藏」

”; } 刷新a.html,点击”跳转” ，则d.html跳转到百度页面修改d.html里面的js部分为： function jump() { parent.location.href...=’http://www.baidu.com’; } 则c.html 跳转为百度，这就说明了”parent.location.href是上一层页面跳转”即父级页面跳转。...”跳转” 按钮，a.html已经跳转到了百度首页，这就解释了”top.location.href是最外层的页面跳转”即为最上层页面跳转。...三、location.href总结 “top.location.href”是最外层的页面跳转（最上层） “window.location.href”、”location.href”是本页面跳转 “...延展 window.location或window.open如何指定target?

5.4K1 0

location.href = ‘index‘用VUE如何跳转

在Vue.js中，你可以使用this.$router.push()来进行路由的编程式导航，而不直接操作location.href。...如果你想要通过编程式导航跳转到 /index 路由，可以按照以下方式进行： // 在组件或Vue实例中 this....直接操作 location.href 会绕过Vue Router，可能导致一些意外的问题。 this.$router.push('/index');是name方式跳转还是path？ ...this.router.push('/index'); 使用的是路径（path）方式进行跳转，而不是使用路由的名称（name）。...如果你想使用路由的名称进行跳转，应该使用对象方式，如下所示： this.$router.push({ name: 'index' }); 在这里，'index' 是目标路由的名称。

1400 0

js如何实现修改页面url不刷新页面

在Chrome、Safari、Firefox 4+和Internet Explorer 10以上可以实现

8.4K3 0

jsp延时跳转_js自动跳转到指定页面

demo下载见文末 ---- js 延时页面跳转 function send(){ alert("转账码制作成功！

11.6K3 0

HTML如何实现页面跳转(html跳转到指定页面)

1、html中使用meta中跳转，通过meta可以设置跳转时间和页面跳转到其他页面 --> 页面 --> 2、通过javascript中实现跳转...1 // 直接跳转 2 window.location.href='index.html'; 3 // 定时跳转 4 setTimeout("javascript:location.href='index.html...;”>返回上一页在Js中网页跳转的写法 1、window.location.href 1 window.location.href="http://www.baidu.com"; //在原有窗口打开

17.9K3 0

jQuery和js获取页面中所有a链接的href值

利用JavaScript和jQuery获取页面中的a链接： jQuery方法： //$('a') 获取了所有的a标签，然后循环获取 $('a').each(function(){ var href... = $(this).attr('href'); console.log(href); }); JavaScript方法：可以封装成一个函数 function getHref(){ var... hrefArr = document.getElementsByTagName('a'); //获取这个页面的所有A标签 for( var i=0; i<hrefArr.length; i++... ){ hrefURL = hrefArr[i].href; console.log(hrefURL); } } 在合适的地方调用： getHref()

14.6K2 0

返回跳转指定页面的JS代码_java页面跳转的代码

JS跳转页面参考代码第一种： window.location.href="login.jsp...; top.location=’xx.jsp’; 页面跳转按钮式：　 ">返回上一步直接跳转式　window.location.href='http://www.ddhbb.com...','','height=500,width=611,scrollbars=yes,status=yes')"& gt;布丁足迹 javascript中弹出选择框跳转到其他页面 <script...act=logout" } } javascript中弹出提示框跳转到其他页面 function logout()..

7.8K2 0

js实现页面跳转并传值(jquery页面跳转并传值)

在前端开发中我们常常需要从一个跳到另一个页面，并且将当前页面的数据传递过去，我常用下面两种方法 1、在url路径后面带参数，参数与url之间用?...隔开，参数与参数之间用&符隔开 window.location.href = "a.html?

11.2K4 0

js获得页面get跳转的参数

通过js获得页面跳转参数页面通过window.kk或通过window.parent.kk进行页面跳转，在新的页面如何获得相应的参数呢？...return strs[i].split("=")[1]; } } } return null; } 这两者区别的地方是获取的url，与跳转的页面方式保持一直...unescape(strs[i].split("=")[1]); } } return theRequest; 原文链接：https://www.choupangxia.com/2019/08/04/js...获得页面get跳转的参数/

11.8K3 0

用js控制frame的页面跳转

通过父窗口对象执行父窗口的js函数就能控制父页面例这是子frame的页面控制另外一个同级的子frame的页面跳转将target='MainMenu'的框架跳转到百度 parent.MainMenu.kk...://www.baidu.com"; 关联链接 1.修改frameset的框架格局：http://blog.csdn.net/luo4105/article/details/51178741 2.用js...控制frame的页面跳转：http://blog.csdn.net/luo4105/article/details/51178708 3.js控制frame的元素：http://blog.csdn.net

7.7K3 0

js中页面刷新和页面跳转的方法总结

.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结文章分类:Web前端关键字: javascript js中页面刷新和页面跳转的方法总结 1.history.go...="javascript:history.go(-1);">向上一页页面跳转:onclick="window.location.href='list.aspx'" P.S....20秒后跳转到http://www.wyxg.com页面 3.页面自动刷新js版 function myrefresh() {...//如何刷新包含该框架的页面用 parent.location.reload(); //子窗口刷新父窗口...:opener.location.reload()">刷新 ) //如何刷新另一个框架的页面用 parent.另一FrameID.location.reload

11.7K8 0

页面跳转进度条JS实现

= step + "%" inforEl.innerText = message; } } function fakeProgress(v, el) { if (v >= 101) location.href...="http://www.open-open.com/code/"; else { setSB(v, el, infor, "页面正在跳转中，请稍候..."); window.setTimeout("fakeProgress

10.5K0 0

JS页面跳转使地址后面不显示参数

背景使用window.open()和window.location.href跳转时，新页面的地址栏会显示参数，如下：http://127.0.0.1:8080/website-cms/admin/article...但是为了方便只使用了同一个页面通过不同的参数控制查看和修改。?op=1和?op=2分别是查看和修改，结果有的用户直接将op=1改为了op=2从而跳过权限验证，直接实现了修改功能。...实现方法实现的思路是利用JS创建一个Form表单，然后将参数用Input元素的方式添加到Form表单中，最后提交Form表单从而实现跳转。...menuId, menuName:menuName } }) $(form).submit(); form = null; } 使用Form跳转后的地址

6K2 0

js页面刷新跳转的几种方式及区别

跳转常用方法： window.location.href="index.php"; window.history.back(-1);//类似于按钮，参数是负几，就后退几次。...window.navigate("index.jsp"); //navigate对象包含有关浏览器的信息，也可以作为页面跳转，后面直接加要跳转的地方。...location.replace(document.referrer); document.referrer history.go(-1);//不刷新页面 history.back();/.../不刷新页面 Javascript刷新页面的常用方法： history.go(0) location.reload() location=location location.assign...http://www.baidu.com页面 3.页面自动刷新js版 //指定1秒刷新一次 setTimeout('window.location.reload

8.7K1 0

HTML页面之间跳转与传值（JS代码）

跳转的方法如下：方法一： window.kk = "b.html"; 方法二（返回上一个页面，这个应该不算，先放在这）： window.history.back(-1); 方法三： self.location...= "b.html"; 方法四： top.location = "b.html"; 有关问题的思考：第一，为什么给window.location和window.kk赋值时一样的，都可以跳转？...第二，给location赋值的时候，如果跳转的页面不是在同一个目录下，需要把完整的URL写上。...如：当前kk为https://www.google.com/ ，如果要跳转到https://www.baidu.com/, 就不能只是www.baidu.com,必须把URL写完整。

8.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭