標簽增加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日更新
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日更新
  • 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。

鏈接
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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM