a标签点击跳转之后返回url多了#以及相关问题

最新推荐文章于 2024-07-29 12:16:40 发布
最新推荐文章于 2024-07-29 12:16:40 发布
阅读量5.9k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nn_nana/article/details/53322025
版权
本文详细探讨了a标签点击跳转后返回URL出现#的问题及其解决方案，包括使用`javascript:void(0)`、`return false`等方式避免页面跳转，并对比了淘宝和阿里巴巴主页的不同处理方式。
摘要由CSDN通过智能技术生成

之前踩了一个很大的坑，坑长这样；

这样会出现的一个问题是点击了a标签实现了页面跳转和函数触发，但是页面跳转之后再返回当前页面的时候，

URL的最末尾会多出一个#；百思不得其解，最后去掉了a标签或者把a标签换成div之后就会好了；

所以记住，a标签点击页面跳转之后返回当前页面URL会多一个#；换成其他标签就不会了；或者换成另外一种方法：


href后面写成“javascript:;”；这样就禁止了a标签的跳转

最低0.47元/天 解锁文章
nn_nana
关注
HTML中A标签中的#号问题
robin622的专栏
03-01 3302
1.问题    开发过程中经常用到这种语句测试，因为要使用到Onclick事件，那么这时，如果onclick只是处理某一事务，而没有进行页面跳转的话，那么这时URL地址会加上个#号；2.处理    2.1把href的值改为：“javascript:void(0);”；    2.2使用span标签测试；  
点击标签链接，URL自动添加“#”的问题
KevinXu9339的博客
04-25 812
当页面之间通过url传递参数时，href="#"的写法会导致url自动添加#结尾，影响参数的取值，此时改为href="javascript:void(0);"就没那种问题了 转载于:https://www.cnblogs.com/mallocLNode/p/6760667.html...
用来跳转的＜a＞ 标签，原来还有这么多强大又实用的功能
邓占勇的博客
07-29 903
说到标签，对于一个前端开发来说应该算是最基础的标签之一了，绝大多数情况都是用来做链接跳转，使用href 配置跳转地址，再设置 target="_blank"在新标签页打开。但是标签的功能远远不止于此，它可以实现很多看似复杂的功能，例如：SEO优化、无感刷新主页面、PV统计、避免重复打开新窗口等。
<a href="#"
waj89757的专栏
12-06 1089
#在URL格式中是表示页内锚点的意思，也就是说点击这个链接后，页面会跳到当前页面指定的锚点（或者说“书签”）处。比如在网页的某个地方有个这样的标签： 那么在页面的其他地方只要放一个这样的链接： 回到hello处 只要点击这个链接，页面就会跳到上述标签处。 如果url中用了#但又未指定锚点名称，那么就是跳到当前页面的最顶端，比如： 顶端 这也是一般页面“回到顶端”功能的实现方法。
Web前端--HTML+CSS+JS新型冠状病毒射击小游戏_js射击小游戏源码
2401_84434331的博客
04-27 987
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
<a href # 地址栏加#问题
OkMyHoney的专栏
08-01 242
直接贴解决方案：      &lt; a href='#' onclick=method();return false;'&gt; 即执行method方法之后，返回false，href不执行  
JS中如何实现点击a标签返回页面顶部的问题
11-26
在JavaScript (JS) 中，实现点击`<a>`标签返回页面顶部的问题，主要涉及到HTML、CSS和JavaScript的基础知识。下面将详细解释这个问题的解决方案及其背后的原理。 首先，一个基本的HTML页面结构如下： ```html <!...
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
10-15
在Vue.js应用中，开发人员经常遇到在a标签中使用变量进行页面跳转的问题。本文将深入探讨如何解决在a标签的href属性中解析变量、添加默认域名端口以及正确跳转页面的方法。 首先，我们要明确Vue.js中的数据绑定机制...
Vue 中 a标签上href无法跳转的解决方式
10-16
然而，在某些情况下，特别是当我们在`a`标签上设置`href`属性用于链接跳转时，可能会遇到在某些浏览器，如IE（Internet Explorer）中无法正常跳转的问题。这个问题通常是由于vue-router与IE浏览器的兼容性问题导致的...
html超链接a标签的href跳转跟onclick之间执行顺序示例介绍
09-28
`href`属性是`<a>`标签的核心，它定义了链接的目标URL，当用户点击链接时，浏览器通常会立即跳转到这个URL所指定的页面。然而，`<a>`标签还可以与`onclick`事件结合，为用户提供更复杂的交互体验。 `onclick`事件是...
关于 href属性中的url 带有#字符的问题
weixin_46016818的博客
09-05 781
href 属性的url带有#特殊字符的问题
a标签的href属性对url的影响
weixin_30906671的博客
09-04 238
在地址为：http://dev.duoduo.cn:9500/knowledge/index.html的页面中，有一个超链接x,如果x的href属性为：/tools/safe.html那么点击x后转到的url路径为：http://dev.duoduo.cn:9500/tools/safe.html如果x的href属性为：tools/safe.html那么点击x后转到的url路径为：http://d...
单页应用里 a标签的href不能随便设置为'#'
weixin_34239592的博客
06-02 186
因为单页应用的导航通常是hash的如果那样设置会导致 window.onhashchange事件重复触发，产业意外结果，而且这个错误非常隐蔽，很不容易想到，我之前自己做的单页应用，就是因为这个一直找不到原因，花了几天才搞定 这个教训必须要记一笔 推荐设置为 a.href='javascript:void(0)'; 转载于:https://www.cnblogs.com/...
去掉浏览器中的锚点#号
weixin_33696106的博客
04-19 1597
首先要知道这个锚点是如何加上去的，目前使用过两种方式加入了锚点 　　1：标签中的href 　　2：window.location.has 第一种很常见网上用例也比较多： 　　点击这个超链接就会在url中加入锚点　　<a class="scroll" href="#content01">内容</a> 　　去掉的话 　　　　　　$(".scroll").click(...
html中a标签的跳转问题
热门推荐
鲍双成的博客
11-20 2万+
一、什么是a标签     a标签是html中的基本标签之一，定义超链接，用于从一张页面链接到另一张页面。可以链接到项目的的文件上，也可以链接到URL网址上，
vue路由跳转错误路径 | 点击事件或刷新后跳转到不正确的路由
dxy1128的博客
10-14 928
vue路由路径不对 | 刷新跳转到不正确的路由
关于html页面跳转会出现路径叠加的问题
weixin_63653446的博客
03-16 357
原因，是因为我表单的th:action=“@{admin/do/login}“错了，正确的应该是th:action=”@{/admin/do/login}”，在前面少了一个’/'。在提交表单时，我没有输入任何数据，这会被我自定义的异常处理器捕获，然后重新跳转到登录页面，然后我的url地址就会叠加，如下。###这是我的自定义异常处理器。###这是我的表单设置。##下面是问题的说明。
＜a＞标签的超链接前面会自动加上当前（网站）地址
我的博客
12-06 1871
标签的超链接前面会自动加上当前（网站）地址
html+css+js点击a标签回到顶部并且跳转页面
最新发布
09-07
当你想要创建一个HTML页面，当用户点击`<a>`标签时，既能滚动到页面顶部，又可以跳转到另一个页面，你可以这样做： 首先，在HTML中，添加一个链接元素，通常给它一个描述性的ID，比如`scroll-top-link`： ```html <a id="scroll-top-link" href="#top">返回顶部</a> ``` 然后，在CSS部分，你可以设置它的样式，例如颜色、位置等： ```css #scroll-top-link { display: none; /* 隐藏默认样式 */ position: fixed; bottom: 20px; right: 20px; color: #fff; background-color: #333; text-decoration: none; padding: 10px 20px; } ``` 接下来，使用JavaScript来处理点击事件。当链接被点击时，先滚动到顶部，然后再执行页面跳转： ```javascript document.getElementById("scroll-top-link").addEventListener("click", function(event) { event.preventDefault(); // 阻止默认的跳转行为 window.scrollTo(0, 0); // 滚动到页面顶部 setTimeout(function() { // 等待一段时间后再跳转，防止滚动过快 window.location.href = "目标页面URL"; // 替换为你实际想跳转的页面地址 }, 500); }); ``` 在这个例子中，如果你需要让链接只在特定屏幕尺寸下可见，可以在CSS中添加媒体查询。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值