有沒有辦法得到一個<button>元素鏈接到一個位置，而在<a href ... tag?

Question

Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?

Button currently looks like:

<button>Visit Page Now</button> 

What I would prefer not to have:

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

The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.

Looking forward to hearing some options/opinions.

Answer 1

Inline Javascript:

<button onclick="window.location='http://www.example.com';">Visit Page Now</button> 

Defining a function in Javascript:

<script> 
    function visitPage(){ 
     window.location='http://www.example.com'; 
    } 
</script> 
<button onclick="visitPage();">Visit Page Now</button> 

or in Jquery

<button id="some_id">Visit Page Now</button> 

$('#some_id').click(function() { 
    window.location='http://www.example.com'; 
}); 

Answer 2

You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.

Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.

(actually, forget the second solution - if you can't use a form, the submit button is out)

Answer 3

Just do this

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

Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.

Answer 4

Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,

THE CSS

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

THE HTML

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

Answer 5

Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/

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

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

Answer 6

這裏包裹它這甚至會工作時，禁用JavaScript的解決方案：

<form action="login.html"> 
    <button type="submit">Login</button> 
</form> 

的訣竅是用自己的<form>標籤環繞該按鈕。

我個人比較喜歡<button>標籤，但你可以<input>做得一樣好：

<form action="login.html"> 
    <input type="submit" value="Login"/> 
</form> 

Answer 7

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

我想通了這一點，它完美地鏈接到另一個頁面，而無需我的默認鏈接設置騎過我的按鈕類！ :)

Answer 8

只是一個側面說明 - 你可能想要考慮默認情況下知道的技巧，但JavaScript鏈接不會爲你做。即：

• 如果你點擊Ctrl，一個新的選項卡將被打開;
• 如果用Shift單擊，瀏覽器會在新窗口中打開鏈接;
• 如果用Alt單擊，它是一個「下載目標」命令。

現在，如果你不想模仿所有的行爲，我建議使用< A HREF>和風格它像一個按鈕，因爲按鈕本身是一個大致的形狀和懸停效果。我認爲如果只有「按鈕而沒有別的東西」在語義上不重要，那麼武士的方式就是這樣。如果您擔心語義和可讀性，您也可以在文檔準備就緒（）時替換按鈕元素。它清楚而安全。