當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何给按钮加上链接功能

發布時間：2025/3/21 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了如何给按钮加上链接功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

腳本說明:

把如下代碼加入<body>區域中

按鈕鏈接乾坤大挪移?

作為一個小技巧，暫時歸類到ASP中。

在設計網站的時，我們可能會想把鏈接做成按鈕的樣子，按鈕做成鏈接的樣子。下面說一下我的方法。

1、按鈕做成鏈接(圖片)的樣子

提交按鈕<input?type="submit"?value="提交">

提交鏈接<a?href="#"?οnclick="表單名字.submit()">提交</a>

重置按鈕<input?type="reset"?value="重置">

重置鏈接<a?href="#"?οnclick="表單名字.reset()">重置</a>

普通按鈕<input?type="button"?value="按鈕"?οnclick="函數()">

普通鏈接<a?href="#"?οnclick="函數()">鏈接</a>

至于圖片也一樣把a標簽換成img

2、鏈接做成按鈕的樣子

<a?href="reg.asp">注冊</a>

=><input?type="button"?value="注冊"?οnclick="location.href='reg.asp'">

-----------------------------------

有的時候我們完全可以手工做一個get方式的表單，至于用按鈕還是鏈接隨心所欲。

<form?action="xx.asp"?method="get"?name="form1">

??<input?name="aa"?type="text"?id="aa">

??<input?name="bb"?type="text"?id="bb">

??<input?type="submit"?name="Submit"?value="提交">

</form>

<input?name="aa"?type="text"?id="aa">

<input?name="bb"?type="text"?id="bb">

<input?type="button"?value="按鈕"?οnclick="location.href='xx.asp?aa='+document.all['aa'].value+'&bb='+document.all['bb'].value">

-----------------------------------

進一步說我們還可以做一個按鈕（鏈接）來同時傳遞js變量，表單input的值，asp變量，Recordset值

var?id1=1；

</script>

id3=3

....

rs.open?exec,conn,1,1

假設有rs("id4")=4

...

<input?name="id2"?type="text"?id="id2"?value="2">

<input?type="button"?value="按鈕"?

οnclick="location.href='xx.asp?id1='+id1+'&id2='+document.all['id2'].value+'&id3=<%=id3%>&id4=<%=rs("id4")%>'">

我們按下按鈕會看到瀏覽器的url是xx.asp?id1=1&id2=2&id3=3&id4=4

在xx.asp中我們就可以用request.querystring來得到所有變量,這樣是不是變相的客戶端js和服務器段的變量傳遞？

------------------------------------------------------------------------------------------------------------------------------

如何給按鈕加上鏈接功能

解決思路：?

按鈕屬于控件級的對象，優先級比較高，所以不能象圖片或文本一樣直接加鏈接，只能通過按鈕的單擊事件調用腳本的方式來實現。

具體步驟：?

????1.在原窗口打開鏈接?

????<input?type="button"??

value="閃吧"?onClick="location=’http://www.flash8.net’">?

????<button?onClick="location.href=’http://www.flash8.net’">閃吧</button>?

????<form?action="http://www.flash8.net"><input?type="submit"?value="打開鏈接"></form>?

????2.在新窗口中打開鏈接?

????<input?type="button"??

value="閃吧"?onClick="window.open(’http://www.flash8.net’)">?

????<button?onClick="window.open(’http://www.flash8.net’)">閃吧</button>?

????<form?action="http://www.flash8.net"??

target="_blank"><input?type="submit"?value="打開鏈接"></form>?

注意：onClick調用的代碼里的引號在只有一重時可以單雙嵌套，超過兩重就必須用"/"號轉義且轉義的引號必須跟里層的引號一致，如：?

<button?onClick="this.innerHTML=’<font?color=/’red/’>http://www.flash8.net</font>’">閃吧</button>?

或?

<button?onClick=’this.innerHTML="<font?color=/"red/">http://www.flash8.net</font>"’>閃吧</button>?

而下面都是錯誤的寫法：?

<button?onClick="this.innerHTML=’<font?color=’red’>http://www.flash8.net</font>’">閃吧</button>?

<button?onClick="this.innerHTML=’<font?color="red">http://www.flash8.net</font>’">閃吧</button>?

<button?onClick="this.innerHTML=’<font?color=/"red/">http://www.flash8.net</font>’">閃吧</button>?

?提示：大部分屬于window或document對象的方法和屬性都可以省略前綴window或document，比如說本例中的location.href(location.href又可以簡寫為location，因為location的默認對象為href)就是window.location.href或document.location.href的省略式寫法。?

技巧：本例中還可以用下面的方法來代替location.href?

location.replace(url)?

location.assign(url)?

navigate(url)?

特別提示?

第一步中的代碼運行后，單擊按鈕將跳轉到鏈接目標。而第二步的在單擊按鈕后將在新窗口中打開鏈接。?

特別說明

本例主要是通過用onClick捕獲用戶在按鈕上的單擊事件，然后調用location對象的href方法或window對象的open方法來打開鏈接。另外一個技巧是通過提交表單來實現鏈接功能，按鈕必須是type=submit類型的按鈕，表單的action值就是鏈接目標，target值就是鏈接打開的目標方式。

總結

以上是生活随笔為你收集整理的如何给按钮加上链接功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。