最近在做个人的一个小网站遇到不少的问题。怕以后忘记,所以记录下来,与你们一起分享一下下,等做好了,在拿给你们看看,好不好?嘻嘻。
1.问题
想必大家也遇到过吧,就是当你点击一个a标签的时候,会自动跳转到浏览器的顶部(当然如果浏览器不出现滚动条,是看不到这个效果的)。
2.出现的原因
遇到问题我们就要解决他们,还要知道其中的原因,才能进步,那么我就来说下,产生的原因,大家都知道a标签有个锚作用,就是给href属性#后面添加一个ID,那么你点击a标签的时候,就会自动跳到有这个ID的地方,那么当#后面什么也不加的时候,a标签就不知道要跳哪里,所以默认就是浏览器的顶部。跟着这个思路就出现以下两种的解决办法。
3.解决的办法
1.在a标签的href属性中写三个#(三个以上也行的)。
<a href=“###”><a/>
这样子a标签就就找到##,也就不会跳转了,但是不推荐使用这种方法,因为这样子,在url地址栏中就会多###。
2.在a标签的href属性中写javascript:void(0);
<a href="javascript:void(0)"><a/>
大家都知道有http: file:等协议,其实javascript:也是一种协议,当你点击a标签的时候,他会自动执行javascript:,后面的内容;就比如,javascript:alert(1),那么就会弹出1,void(0)的返回值是undefined,所以执行javascript:void(0),简单的理解就是什么也没执行,执行了一个空的函数(这样子理解好像不准确)所以就不会跳转了。
我在前端也一个小白,如果有什么理解不正确的地方,希望大家指出,我们共同进步,好不好?哈哈。么么哒,爱你们!