javascript - href用法 - html a color



有沒有辦法讓<button>元素鏈接到一個位置而不將其包裝在<a href...標籤中? (6)

只是想知道是否有辦法讓HTML <button>元素鏈接到一個位置而不將其包裝在<a href...標籤中?

Button目前看起來像:

<button>Visit Page Now</button>

希望有什麼:

<a href="link.html"><button>Visit Page Now</button></a>

該按鈕未在表單中使用,因此<input type="button">不是一個選項。 我只是想知道是否有一種方法可以鏈接這個特定元素而無需將其包裝在<a href標記中。

期待聽到一些選擇/意見。


<form action="portfolio.html"> <button type="link" class="btn btn-primary btn-lg">View Work</button> </form>

我只是想出來了,它完美地鏈接到另一個頁面而沒有我的默認鏈接設置超過我的按鈕類! :)


只是旁注 - 你可能想要考慮<a href>默認知道的技巧,但javascript鏈接不適合你。 即:

  • 如果單擊Ctrl鍵,將打開一個新選項卡;
  • 如果您使用Shift單擊,瀏覽器將在新窗口中打開鏈接;
  • 如果單擊Alt,則為“下載目標”命令。

現在,如果您不想模擬所有這些行為,我建議使用<a href>並將其設置為按鈕,因為按鈕本身大致是一種形狀和懸停效果。 我認為如果僅僅擁有“按鈕而不是其他內容”在語義上並不重要,那麼<a href>就是武士的方式。 如果您擔心語義和可讀性,您還可以在文檔準備就緒時替換按鈕元素()。 它清晰而安全。


就這樣做吧

<button OnClick=" location.href='link.html' ">Visit Page Now</button>

雖然,自從我觸及JavaScript以來已經有一段時間了 - 也許location.href已經過時了? 無論如何,我就是這樣做的。


您可以將其設置為非提交按鈕( <button type="button"> ),並將類似window.location = 'http://where.you.want/to/go'到其onclick處理程序中。 如果沒有啟用JavaScript,這不起作用。

或者你可以把它作為一個提交按鈕,並在服務器上進行重定向,雖然這顯然需要某種服務器端邏輯,但好處是不需要javascript。

(實際上,忘記第二個解決方案 - 如果你不能使用表單,提交按鈕就會出來)


這是使用jQuery。 在http://jsfiddle.net/sQnSZ/查看它的實際應用

<button id="x">test</button>

$('#x').click(function(){
    location.href='http://cnn.com'
})

那麼,對於鏈接,必須有一個鏈接標記。 你還可以做的是為按鈕創建一個css類,並將該類分配給鏈接標記。 喜歡,

CSS

#btn{ background:url(images/button.jpg) no-repeat 0 0; display:block; width:50px; height:20px; border:none; outline:none;}

HTML

<a href="btnlink.html" id="btn"></a>




hyperlink