HTML按鈕：導航到其他頁面 - 不同的方法

有多種方式可以創建HTML按鈕以導航到其他頁面。HTML按鈕：導航到其他頁面 - 不同的方法

方法1

<button id="btn_click">Click Me</button> 
<script> 
$('#btn_click').on('click', function() { window.location = 'http://www.google.com'; }); 
</script>

優勢：獨立JS從HTML（MVC）
缺點：長碼，依靠JS
注：jQuery選擇是可選的，可以使用傳統JavaScript

方法2

<button onclick="window.location='http://www.google.com'">Click Me</button>

優勢：1的襯墊，沒有必要分配ID到按鈕
缺點：混合JS與HTML，依靠JS

方法3

<a class="click-me" href="http://www.google.com">Click me</a> 
<style> 
.clickMe { 
    -moz-appearance: button; 
    -ms-appearance: button; 
    -o-appearance: button; 
    -webkit-appearance: button; 
    appearance: button; 
    text-decoration: none; 
    color: #000; 
    padding: 0.2em 0.4em; 
} 
</style>

優勢：無需依靠JS
缺點：看起來像假的按鈕，IE9 +要求（appearance是CSS3屬性）
注：這是從here

方法4

<form action="http://www.google.com"> 
<button>Click Me</button> 
</form>

優勢：最短的代碼，無需依靠JS
缺點：錯誤使用<form>標記。如果有另一個提交按鈕，則不起作用

程序員，哪種方法是最高效的（因此被廣泛使用），爲什麼？

注意：我們可以把它作爲社區維基？

來源

2013-07-10 Raptor

重新編寫了問題。請重新考慮。我想我可能會有一個答案'：）' – rktcool

我建立了一個鏈接。鏈接是鏈接。一個鏈接導航到另一個頁面。這就是鏈接，每個人都明白這一點。所以方法3是我書中唯一正確的方法。

我不希望我的鏈接看起來像一個按鈕，當我這樣做時，我仍然認爲功能比看起來更重要。

按鈕不易訪問，不僅因爲需要Javascript，而且還因爲視覺障礙者的工具可能無法很好地理解這個Javascript增強按鈕。

方法4也可以工作，但它比真正的功能更多一個技巧。您濫用表單向此其他頁面發佈「無」。它不乾淨。

來源

2013-07-10 08:09:53 GolezTrol

但是，在基於Web的系統（如內容管理系統（CMS） – Raptor

@ShivanRaptor）中使導航看起來像按鈕是一種常見做法，但是當您談論頁面時，這聽起來像一個網站，而不是一個Web應用程序。在（專業）應用程序中，適用不同的規則，因爲您爲特定的用戶羣編寫它們。一個網站應該適合每個人。儘管如此，在CMS中，我更喜歡鏈接，也許會添加一些CSS。它看起來像很多代碼，但你只需要一次CSS，只需將一個類添加到需要看起來像按鈕的鏈接。 – GolezTrol

同意你的意見。一個CSS裝飾的''標籤在大多數情況下是高效和充分的。 – Raptor

我使用方法3是因爲它對於其他人來說是最容易理解的（只要你看到一個標籤，你知道這是一個鏈接），當你是團隊的一員時，你必須做出簡單的事情;）。

最後我不認爲使用JS簡單地導航到其他頁面是有用和高效的。

來源

2013-07-10 08:10:36

HTML按鈕：導航到其他頁面 - 不同的方法

回答

相關問題