链接跳转:在本页面跳转
链接跳转:在本页面跳转
- 为什么要使用`href=”javascript:void(0);”`？
- `href=”javascript:void(0);”`与`href=”#"`的区别：
- 使用javascript的方法
- 简单代码栗子
href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，- 而
void(0)表示一个空的方法，也就是不执行js函数。
为什么要使用href=”javascript:void(0);”？
javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作，<a href="javascript：void(0)" onClick="window.open()">点击链接后，页面不动，只打开链接<a href="#" οnclick="javascript:return false;">作用一样，但不同浏览器会有差异。
href=”javascript:void(0);”与href=”#"的区别：
<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部<a href="#">点击 点击后会回到网面顶部；"＃"其实是包含了位置信息，例如默认的锚点是＃top也就是网页的上端- 而
javascript:void(0)仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首； - 而
javascript:void(0)则不是如此所以调用脚本的时候最好用void(0)；
使用javascript的方法
1、<a href="#" οnclick="javascript:方法;return false;">文字
2、<a href="javascript:void(0)" οnclick="javascript:方法;return false;">文字
3、<a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了。
简单代码栗子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><ul style="position: fixed;"><li><a href="javascript:;" data-tab="eat">111</a></li><li><a href="javascript:;" data-tab="sleep">222</a></li><li><a href="javascript:;" data-tab="walk">333</a></li></ul><div ><div data-tab="eat" style="background:cyan; height:500px;">111</div><div data-tab="sleep" style="background:lightgreen;height:1000px;">222</div><div data-tab="walk" style="background:LightSalmon;height:1000px;">333</div></div><script>[].slice.call(document.querySelectorAll('a')).forEach(function(el){el.addEventListener('click', function(){var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )target.scrollIntoView(true);})})</script>
</body>
</html>
链接跳转:在本页面跳转相关推荐
- [Xcode 实际操作]九、实用进阶-(24)使用Segue(页面的跳转连接)进行页面跳转并传递参数...
目录:[Swift]Xcode实际操作 本文将演示使用Segue(页面的跳转连接)进行页面跳转并传递参数. 参照结合:[Xcode10 实际操作]九.实用进阶-(23)多个Storyboard故事板中 ...
- 链接跳转（本页面跳转）
href="javascript:void(0);"这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址, 而void(0)表示一个空的方法,也就是不执行js函数. 为 ...
- html中js实现跳转,JS实现页面跳转与刷新的方法汇总
window.location(.href)="url" 其实 .href 可以省略 window.location和 window.location.href实现的效果是一样的 ...
- php中怎样阻止网页进行跳转,阻止php页面跳转方法
阻止php页面跳转方法 一. header 函数 header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 参数 void header (string string [,bo ...
- js 跳转html,js页面跳转方式 js页面跳转举例
js页面跳转,在日常的开发中,经常被用到,因为它灵活方便. 本文为大家收集了几种js页面跳转的方式,供朋友们参考. 方式1: 复制代码 代码示例: window.location.href=" ...
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码
摘要 腾兴网为您分享:PHP页面跳转 Js页面跳转代码,自动刷宝,中信金通,携程抢票,未来屋等软件知识,以及沃金汇,沃行讯通,securecrt.exe,我的世界变形金刚mod,一票通,农场小分队,手 ...
- html5页面跳转方式,H5页面跳转的交互设计方法
今年做了大量的H5项目,遇到了很多坑,有自家的也有第三方的,在这个过程中get到了一些之前不具备的知识,所以这一篇,就简单分享一下这方面的话题吧. 一.传统的MPA 首先,说一个比较古老的东西,叫做M ...
- vue点击按钮怎么跳转图片_vue页面跳转
一.在template中的常见写法: 点击跳转 二.在js中设置跳转(在方法中跳转界面并传参,两种方式:params 与 query): 有时候我们需要的是点击按钮跳出弹窗,选择判断后进行跳转,我们常 ...
- node怎么跳转链接_使用nodejs实现页面跳转
使用NodeJs实现页面的跳转 1 创建testApp.js: var http=require('http'); var fs=require('fs'); var server =http.cre ...
最新文章
- 这次终于彻底理解了傅里叶变换
- Windows Server 2008组策略安全实践手册
- 想通关「限流」？只要这一篇
- Python爬虫加密
- 996. Number of Squareful Arrays
- linux异步实现原理,Android异步处理四：AsyncTask的实现原理
- C++ std::remove/std::remove_if/erase用法探讨
- 将txt文件转换成xlsx文件及用matlab读取xlsx
- Team Foundation Server 的 Service Pack 1（中文）也发布了，
- 如何使用 Python 构建 PC 通信？
- 作为日千万订单级别的业务，美团外卖的后端服务是怎么支撑的
- java gc 例子_Java 中, 为什么一个对象的实例方法在执行完成之前其对象可以被 GC 回收?...
- python开源聊天框架_转载：15个最受欢迎的Python开源框架-阿里云开发者社区
- 远程连接（加密验证问题解决）
- 博客园里写blog可以添加自己的js文件
- ARPSpoofing教程（四） - 捕获并分析数据包
- 区块链到底是个什么鬼？一幅漫画让你秒懂！
- 轻松搞懂Word2vec / FastText+BiLSTM、TextCNN、CNN+BiLSTM、BiLSTM+Attention实现中英文情感分类
- java万年历开题报告_单片机万年历开题报告
- 宏碁台式计算机u盘启动,宏基台式机U盘重装怎么设置U盘启动项