链接跳转:在本页面跳转
链接跳转:在本页面跳转
- 为什么要使用`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)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作，点击链接后，页面不动，只打开链接作用一样，但不同浏览器会有差异。
href=”javascript:void(0);”与href=”#"的区别：
点击点击链接后不会回到网页顶部点击 点击后会回到网面顶部；"＃"其实是包含了位置信息，例如默认的锚点是＃top也就是网页的上端- 而
javascript:void(0)仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首； - 而
javascript:void(0)则不是如此所以调用脚本的时候最好用void(0)；
使用javascript的方法
1、文字
2、文字
3、这样点击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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！