给<a>标签增加href属性 ~~~ 转转

给<a>标签增加href属性，就意味着以下事情：

• :link选择器可以选择到它
• 这个a标签可以获得焦点（可以通过tab按键访问到）
• 在浏览器的默认样式表中，有href属性的<a>标签才有cursor:pointer的效果（尤其是在低版本的IE上）。

绑定了onclick事件的<a>标签，尤其是它的作用是ajax请求时，基本上我们就用不上这个标签的默认行为，也连接不到的实际页面，一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性，是为了：

• 让<a>够响应键盘事件并获得焦点（从而屏幕阅读器能够读出背后的内容，增强可访问性）
• 优雅降级，在网络连接很差，还没有加载到CSS的时候，<a>依然有手型与正常的link样式。

给<a>标签以href属性，并不连接到实际的页面的方案有：

1. <a href="#"></a>
2. <a href="#nogo"></a>
3. <a href="##"></a>
4. <a href="###"></a>
5. <a href="javascript:void(0);"></a>
6. <a href="javascript:void(0)"></a>
7. <a href="javascript:;"></a>
8. <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="#">#</a>
        </p>
        <p>
            <a href="##">##</a>
        </p>
        <p>
            <a href="###">###</a>
        </p>
        <p>
            <a href="####">####</a>
        </p>
        <p>
            <a href="#####">#####</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.7k 2013年11月19日回答

• 显示评论 (10条)

1赞踩

这么写没什么不好的，表明该部分的外观像链接，鼠标需要手型，需要响应点击，但没有实际动作。用来替代href="#"。这种写法实质上并不算做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.4k 2013年11月19日回答

• 1

  kmxz · 2013年11月19日

  其实还有一种做法很优雅，href 并不指向一个真正的单独的页面，而依然只是 url 的 hash 部分不同。如果直接点击就由 javascript 来更新页面内容；如果 open in new tab，那个页面加载进来后 js 会读取 location.hash 并且加载对应的内容。Gmail 就是那样的典范。

• 更多评论 (1条)

1赞踩

很多网站都这么做：微博、腾讯、虾米等等……

反正我个人是很不喜欢这种做法

另一种做法是像这个页面右边的“邀请回答”那样，<a href="#">。我也很不喜欢。

原因是一样的：因为我见到链接常常会右键 open in new tab。

链接

kmxz2.3k 2013年11月19日回答

• 1

  沙渺 · 2013年11月19日

  从open in new tab的角度来看，#甚至比void(0)更差一些

• 更多评论 (2条)

1赞踩

坏处：

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

给<a>标签增加href属性 ~~~ 转转