首页 > 代码库 > 给<a>标签增加href属性 ~~~ 转转
给<a>标签增加href属性 ~~~ 转转
给<a>
标签增加href属性,就意味着以下事情:
- :link选择器可以选择到它
- 这个a标签可以获得焦点(可以通过
tab
按键访问到) - 在浏览器的默认样式表中,有href属性的
<a>
标签才有cursor:pointer
的效果(尤其是在低版本的IE上)。
绑定了onclick事件的<a>
标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性,是为了:
- 让
<a>
够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性) - 优雅降级,在网络连接很差,还没有加载到CSS的时候,
<a>
依然有手型与正常的link样式。
给<a>
标签以href属性,并不连接到实际的页面的方案有:
<a href="http://www.mamicode.com/#"></a>
<a href="http://www.mamicode.com/#nogo"></a>
<a href="http://www.mamicode.com/##"></a>
<a href="http://www.mamicode.com/###"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:;"></a>
<a href="javascript:"></a>
他们的体验有细微的差别。
- 1,点击这个链接后,会让页面跳到头部,window.location.href末尾增加#(若window.location.href末尾没有#),除非在js里面捕获onclick事件并阻止默认事件。
- 2有了初步的语义。但是,如果页面里面有id为nogo的元素,点击这个链接后,锚点机制会作用,页面贴齐这个元素上缘。更详细的,详见张鑫旭的《URL锚点HTML定位技术机制、应用与问题》
- 3在chrome中不再默认跳转到页面头部,4在IE11中不再跳转到页面头部。
正常的点击不会在地址栏增加#,但若用户使用open in new tab的方式(比如中键),就会跳到形如,见下方测试。http://segmentfault.com/q/1010000000339082###
的地址 - 5~8作用相同,但使用了javascript伪协议。在IE6下面,这个a标签被点击后,IE6会使得页面中的gif暂停,并且触发onbeforeunload事件(详情参考这里),IE6认作这个页面有了重定向,并abort之后所有的请求(参考这里)。所以假如你在此之后替换了一个
<img>
的src,IE6完全不会完成这个新的请求。
所以我更倾向于使用方案4。
至于语义上LZ这种<a href="javascript:void(0)">
使用方式,LS多人已经有了足够详细的回答。我再补充一点,这种情形依然可以做到搜索引擎友好支持无障碍应用,方法请参考《WAI-ARIA无障碍网页应用属性》。
更新,我做了如下的测试:
<p> <a href=http://www.mamicode.com/"#">#</a> </p> <p> <a href=http://www.mamicode.com/"##">##</a> </p> <p> <a href=http://www.mamicode.com/"###">###</a> </p> <p> <a href=http://www.mamicode.com/"####">####</a> </p> <p> <a href=http://www.mamicode.com/"#####">#####</a> </p> <script type="text/javascript"> var n = 0 ; window.onhashchange = function(){ alert(++n) ; } </script>
- 在IE11中,点击###、####和#####时,页面不再跳转到头部
- 在chrome中,点击##、###、####和#####时,页面不再跳转到头部。
- 但是在IE11和chrome中,点击所有的
<a>
都会造成地址栏的修改,并触发hashchange事件。
所以之前说的“###不会造成地址栏的改变”是错误的。
没有大规模测试其他的浏览器,这里做初步猜想:###的意义在于,这是字符数最少的,在所有的浏览器中不会导致跳转到页面头部的锚点。
再次更新,这个问题引发了很多关于语义的友好讨论啊,真好。
我赞同@fox同学的“不要滥用a来替代button”。
问题在于,如果需要使用button,语义解决了,多浏览器样式兼容又坑爹了……
这个我之前回答过,就顺(you)便(yi)提一下吧:如何保证各浏览器下 <input><button> 定义的按钮尺寸一样?
2013年11月20日更新 | Humphry4.7k2013年11月19日回答 |
- 显示评论 (10条)
这么写没什么不好的,表明该部分的外观像链接,鼠标需要手型,需要响应点击,但没有实际动作。用来替代href="http://www.mamicode.com/#"
。这种写法实质上并不算做html混杂js。
无论是用#
还是void(0)
,有一个共同的缺点在于:这样做就让这个行为,必须启用js才能实现。别笑,虽然说大多数人是加载js的,但也不能排除连接故障等意外,或真的有少数狂人不用js。另外,js也不能被搜索引擎所跟踪,这是个需要考虑的问题。
从这个意义上讲,#
甚至更差一些,因为单独的#
在语义上,其实隐含着指向了网页自己,如果使用“在新标签页中打开”时就会产生迷惑。而这个问题void(0)
没有。
所以最好能做到以下二者其一:
- href属性指向一个真正的单独的页面。让业务功能在没有js时,通过跳转页面也能实现,只不过js能实现的更加优雅(例如用ajax做无刷新更新,或用lightbox做网页内弹出小窗口)。
- 如果实在没有js不行,那就把功能链接在加载网页时暂时隐藏,等到js就绪了再真正显示出来。
注:其实真正不好的写法是<a href="javascript:void(0)" onclick="functionclick();">
,真正的在html中混杂js行为,让html的工作者时刻做“别把哪段js不小心删了”这种不必要的担心。正确的做法应该是对<a>
定义id属性,然后通过id后绑定click等事件。
2013年11月19日更新 | 沙渺10.4k2013年11月19日回答 |
- 1kmxz · 2013年11月19日
其实还有一种做法很优雅,href 并不指向一个真正的单独的页面,而依然只是 url 的 hash 部分不同。如果直接点击就由 javascript 来更新页面内容;如果 open in new tab,那个页面加载进来后 js 会读取 location.hash 并且加载对应的内容。Gmail 就是那样的典范。
- 更多评论 (1条)
很多网站都这么做:微博、腾讯、虾米等等……
反正我个人是很不喜欢这种做法
另一种做法是像这个页面右边的“邀请回答”那样,<a href="http://www.mamicode.com/#">
。我也很不喜欢。
原因是一样的:因为我见到链接常常会右键 open in new tab。
kmxz2.3k2013年11月19日回答 |
- 1沙渺 · 2013年11月19日
从open in new tab的角度来看,
#
甚至比void(0)
更差一些 - 更多评论 (2条)
坏处:
1、javascript:
是伪协议,是非标准化的协议
2、不能平稳退化,当用户的浏览器对JS失效或禁用时点击后什么意义都没有
3、大部分搜索引擎不会搜索到它,因为没有内容,从而影响排名 (#
是不是也算上空链?空链对搜索引擎也不友好)
解决方法:
1、将 javascript:
、 #
、 ###
替换成真实网址,并取消 <a>
的默认点击事件,return false
或 event.preventDefault
,如果JS失效了该链接虽功能上打了些折扣,但并没有彻底失效,做到了“平稳退化”
如:本网站侧边栏的“邀请回答”的 http://segmentfault.com/q/1010000000339082#
可以替换成真实地址 http://segmentfault.com/q/1010000000339082
,然后继续它之后的事件
2、将不该是按钮的改成按钮。好多人都在“烂”用 <a>
,每个人都想让它去完成 <button>
的事情,可看下这篇文章《你不能创造一个按钮》,讲的有些道理
如:还是本网站右侧的“邀请回答”,完全可以换成 button