页面跳转/onclick后顶在网页最上面:href锚点的使用
2022/2/12 23:44:56
本文主要是介绍页面跳转/onclick后顶在网页最上面:href锚点的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、问题截图
目的:点击用户实现相关写信功能
问题:点击用户整块frame后它顶在页面最上面,由于header固定头在那里,所以我看不到frame的title了。
二、出现原因
2.1程序更正
我错误程序这么写的:
<li onclick="$('#username').val('${it.username}');$('#userid').val('${it.id}')"> <a href="#" > <%-- 用户列表详细信息 --%> </a> </li> <input type="text" name="username" id="username" class="form-control1 control3" placeholder="被发送者 :"> <input type="hidden" name="userid" id="userid" class="form-control1 control3" placeholder="被发送者 :">
改之后:
<li > <a href="javascript:void(0);" onclick="$('#username').val('${it.username}');$('#userid').val('${it.id}')"> <%-- 用户列表详细信息 --%> </a> </li> <input type="text" name="username" id="username" class="form-control1 control3" placeholder="被发送者 :"> <input type="hidden" name="userid" id="userid" class="form-control1 control3" placeholder="被发送者 :">
是因为没有弄清href="",这叫做锚点。
herf="#",即指向网页的顶部,我原本顶部放了header,所以导致被遮盖。换为href="javascript:void(0);"就不会出错了。
2.2href=”javascript:void(0);”与href=”#"的区别
摘自:href="javascript:void(0)" 的用法 - 海燕。 - 博客园 (cnblogs.com)
<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部 <a href="#">点击</a> 点击后会回到网页顶部
href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址, 而void(0)表示一个空的方法,也就是不执行js函数。"#"其实是包含了位置信息,例如默认的锚点是#top 也就是网页的上端 而javascript:void(0) ,仅仅表示一个死链接,这就是为什么有的时候页面很长,浏览链接明明是#,可是跳动到了页首 而javascript:void(0), 则不是如此所以调用脚本的时候最好用void(0)。
三、锚点锚记href的使用
通俗的讲,我们想要让页面定位到的位置,即为锚点。锚点本身就是一种超链接,它指向页面面内部特定的部分。
锚点链接的定位,需要由两个部分组成:
(1)锚点标记,也就是要定位到的位置,我们称为“锚记”;
(2)指向锚记的链接
摘自:HTML小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #锚点定位 #DOM定位 #hash路由中使用锚链接) - 码上快乐 (codeprj.com)
3.1跳转本页面的锚点链接
(1)设置一个锚点:使用a标签name属性表示锚点名称
(2)在超链接的href属性中,使用#+name 跳到指定的锚点位置。
3.2其他页面锚链接
(1)需跳转的页面设置锚链接
(2)在超链接的href属性,文件名.html#name。
3.3不点击直接跳转锚链接的情况
下面展示了使用页面便签id实现锚记的栗子,也就是所谓的,“id”定位法
3.4react、vue等使用hash路由的框架中使用锚链接
对于react及vue中使用hashRouter的情况,可在路由地址(及参数)后添加 #name即可
举例,最终处理地址应为如下格式
这篇关于页面跳转/onclick后顶在网页最上面:href锚点的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23增量更新怎么做?-icode9专业技术文章分享
- 2024-11-23压缩包加密方案有哪些?-icode9专业技术文章分享
- 2024-11-23用shell怎么写一个开机时自动同步远程仓库的代码?-icode9专业技术文章分享
- 2024-11-23webman可以同步自己的仓库吗?-icode9专业技术文章分享
- 2024-11-23在 Webman 中怎么判断是否有某命令进程正在运行?-icode9专业技术文章分享
- 2024-11-23如何重置new Swiper?-icode9专业技术文章分享
- 2024-11-23oss直传有什么好处?-icode9专业技术文章分享
- 2024-11-23如何将oss直传封装成一个组件在其他页面调用时都可以使用?-icode9专业技术文章分享
- 2024-11-23怎么使用laravel 11在代码里获取路由列表?-icode9专业技术文章分享
- 2024-11-22怎么实现ansible playbook 备份代码中命名包含时间戳功能?-icode9专业技术文章分享