HTML button onclick 跳頁做法範例,也可以回上一頁

HTML 的 Button 按鈕的應用範圍很廣泛,最常見的用法當然就是送出表單,不過 Button 還可以與 JavaScript 搭配製做出許多其它好用的應用,例如開啟新視窗(window.open)或利用 onclick 事件製做跳頁,也就是按下按鈕後,會自動轉到另一個網頁,這篇就是要教你如何製作 button onclick 的跳頁,共有兩個範例,分別是 onclick 後回到首頁以及 onclick 後回到上一頁。

範例一、假設我們要跳到本站首頁,語法如下

<input type ="button" onclick="javascript:location.href='http://www.wibibi.com'" value="回到 Wibibi 首頁"></input>

呈現結果


其中 onclick 的時候,我們用了 JavaScript 的 location.href 語法,將網頁帶到本站首頁,你也可以將網址改為其它網頁,button 的 value 指的是按鈕的値,這個也可以自己設定。

範例二、button onclick 後回到上一頁,語法如下

<input type ="button" onclick="history.back()" value="回到上一頁"></input>

範例中,我們採用了 history.back() 的語法,代表的是回到瀏覽器紀錄的上一頁,這也代表如果沒有紀錄,就不會有反應。回到上一頁的做法有很多,我們也有詳細的介紹,請看延伸閱讀。

延伸閱讀
JavaScript 回上一頁與前往下一頁語法
JavaScript window.open() 開新視窗以及屬性設定
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C