HTML button 將按鈕做成連結
2021/10/20
萌芽站長
14,537 4
網站技術 , HTML
在 HTML 中,<button> 並沒辦法直接加上 href 屬性使按鈕作為連結,因此需要靠一些「手段」讓按鈕有像是 <a> 一樣的行為。
首先是方法一,利用一個 <form> 將 <input type="submit"> 包在裡面,而外頭的 <form> 還要給予一個 action 屬性以給予連結,原始碼如下:
<form action="https://mnya.tw">
<input type="submit" value="前往萌芽網頁(MNYA.TW)" />
</form>
再來是方法二,利用 JavaScript 來設定 window.location.href
,可以做到類似連結的效果,原始碼如下:
<input type="button" onclick="location.href='https://mnya.tw';" value="前往萌芽網頁(MNYA.TW)" />
以上兩種方法都可以用,依照需求取用修改即可!
CodePen
See the Pen
HTML button 將按鈕做成連結 by Feng, Cheng-Chi (@qwe987299)
on CodePen.
▲ 精選圖片。
贊助廣告 ‧ Sponsor advertisements
【論壇經營】Discuz! X3.1 修復無法修改頭像
📆 2014-11-08
📁
網站技術, 架站程式, Discuz!
WordPress 被安裝神秘的外掛,接著訪客隨機被導引至詐騙廣告
📆 2021-06-07
📁
網站技術, 資訊安全, 架站程式, WordPress
CSS3「border-radius」基礎圓角製作教學
📆 2018-09-27
📁
網站技術, CSS
jQuery.qrcode:純前端生成 QR Code
📆 2019-09-25
📁
網站技術, JavaScript, jQuery
SugarHosts 糖果主機:CP值高的付費虛擬主機,無限空間/流量
📆 2018-08-16
📁
網站技術, 架站資源
Color Picker(Visual Studio Code 擴充功能):CSS 色碼調色盤、支援透明度
📆 2019-02-11
📁
軟體應用, 網站技術, CSS
CSS:模糊效果的美化邊框
📆 2013-01-01
📁
網站技術, CSS
Native Lazyload:原生延遲載入功能登場!純 HTML 就能做到!
📆 2019-09-14
📁
軟體應用, 瀏覽器, 網站技術, HTML, 架站程式, WordPress, Google Chrome
留言區 / Comments
萌芽論壇