javascript的漸進增強與平穩退化淺談_javascript技巧

在google.com.hk的左上角，有一個更多的鏈接，它具有一個目標地址，但是當我們點擊時，大多數情況發現的是彈出一個下拉列表供用戶選擇（這是一種典型的漸進增強形式）。怎麼理解？ ——如果使用者的瀏覽器支援javascript，那麼就可以享受到這個快速導航的服務功能。

現在，請你禁用的你的瀏覽器的javascript功能（不會禁用猛擊這裡)，再次訪問google.com.hk，再次點擊更多時，發生了什麼？是的，沒有看到下拉列表，而開啟了一個新頁面。 （這是一種典型的平穩退化）。怎麼理解？ ——如果使用者的瀏覽器不支援javascript，使用者仍然能夠造訪我的網站。

如何實現類似google的這項功能？

複製代碼 代碼如下:

 更多»

解釋：displayMenu()是一個顯示導航列表的功能函數（這裡省略它的實現，因為討論的並不是這個）
onclick指定了連結的點擊事件。
return false ： 取消了瀏覽器的預設行為（這樣就執行了displayMenu()，而不發生頁面的跳轉了），這個不可省略（當然你可省略試試看，有助於你的理解）

現在我們來看：如果你的瀏覽器支援javascript時，那麼onclick後的程式碼一定會被執行。否則，onclick後的程式碼不會被執行，那就會發生頁面的跳躍。這樣不管是否支援javascript，使用者都能順利的造訪我的網站。

下面是另一個類似的例子，它在新視窗中打開一個鏈接，但是我們並沒有指定target，如果用戶的瀏覽器不支援javascript，它將在當前頁面中打開鏈接，如下：

複製代碼 代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   
• 百度

   
• google a>