Question

我的网页上有链接，如下所示：

<a href="/xxx/"  >
  <button >xxx</button>
</a>

我有几个这样的，我希望用户可以轻松点击它们而无需用户转到按钮并单击。我是否可以为用户提供一个快捷方式，例如ALT M或分配给按钮的快捷方式？如果用户点击Enter，我也可以将按钮设为默认按钮吗？

Answer 1

您应该使用accesskey属性

<a href="/xxx/"  >
  <button accesskey="M" >xxx</button>
</a>

Answer 2

使用accesskey =“1”为元素提供“accesskey”。当用户按1将激活链接时。

修改

对于javascript（jQuery）解决方案，请参阅this SO post

Answer 3

我建议将div设计为看起来像一个按钮，就像它们在stackoverflow.com上为标签所做的那样

<div class="post-taglist">
<a class="post-tag" rel="tag" title="" href="/questions/tagged/javascript">javascript</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/html">html</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/css">css</a>
</div>

stackoverflow.com使用的CSS（需要一些工作！）

.post-taglist {
    clear: both;
    margin-bottom: 10px;
}
.edit-tags-wrapper > a.post-tag {
    margin-right: 6px;
}
.post-tag, .post-text .post-tag, #wmd-preview a.post-tag {
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    color: #3E6D8E;
    font-size: 90%;
    line-height: 2.4;
    margin: 2px 2px 2px 0;
    padding: 3px 4px;
    text-decoration: none;
    white-space: nowrap;
}
post-tag:hover, .post-text .post-tag:hover, #wmd-preview a.post-tag:hover {
    background-color: #3E6D8E;
    border-bottom: 1px solid #37607D;
    border-right: 1px solid #37607D;
    color: #E0EAF1;
    text-decoration: none;
}

或者，您可以将按钮包装在表单元素中，如

<form method="post" action="nextPage.html"  >
<button>Press me</button>
</form>

我希望这会有所帮助。

我可以为按钮做一个捷径吗？

3 个答案: