html - 如何在 HTML 中对按钮进行编程以转到链接？

Question

我的 Razor 视图中有以下内容：

<button class="float-left submit-button" title="Test Questions">Test</button>

我怎样才能使它在单击按钮时转到以下 URL？

"~/F000C/Home-About"

Answer 1

只需使用链接和按钮，如下所示：

<a href="http://www.example.com"><button class="float-left submit-button" title="Test Questions">Test</button></a>

Answer 2

<button class="float-left submit-button" title="Test Questions" onclick="javascript:window.open('~/F000C/Home-About')">Test</button>

如果你真的想要按钮元素，那么你应该插入onclick事件。

或者：

<button class="float-left submit-button" title="Test Questions" onclick="window.location.assign('~/F000C/Home-About')">Test</button>

Answer 3

您可以使用仅包含一个按钮的简单表单：

<form action="~/F000C/Home-About">
<button class="float-left submit-button" title="Test Questions">Test</button>
</form>

您可能需要设置form { display: inline }，因为默认情况下表单显示为块。

然而，使用普通链接元素并将其设置为按钮样式（现在在 CSS 中很容易）是一个更好的主意。想想搜索引擎。（他们通常不提交表单，也不应该期望他们运行 JavaScript；但他们只是喜欢链接。）

Answer 4

为什么不使用 CSS 和 HTML 使链接看起来像一个很棒的按钮。更多示例在这里。

HTML

<a class="awesome" href="http://www.example.com">Super Awesome Button Link &raquo;</a>

CSS

.awesome, .awesome:visited {
    background: #666; 
    display: inline-block; 
    padding: 5px 10px 6px; 
    color: #fff; 
  font:12px Calibri, Verdana;
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
}
.awesome:hover { background-color: #111; color: #fff; }