html - 在 HTML/CSS 按钮中实现链接

Question

我需要在这些按钮中添加一个链接：

<div class="buttons">
      <button class="action bluebtn"><span class="label">CREATE NEW ACCOUNT</span></button>
      <button class="action redbtn"><span class="label">EDIT ACCOUNT</span></button>
      <button class="action greenbtn"><span class="label">IMPORT EDI TEXT FILES</span></button>
      <button class="action"><span class="label">LOG OUT</span></button>
    </div>

有人可以帮助我吗？

Answer 1

这里有几个选项，具体取决于您是否可以更改 HTML：

如果您可以更改 HTML，则将按钮变为常规按钮，<a href="http://www....">link</a> 或者您可以添加 onclick 事件：

<button class="action bluebtn" onclick="javascript:document.location='some-url'">
    <span class="label">CREATE NEW ACCOUNT</span>
</button>

如果您无法更改 HTML，请使用 jQuery 之类的工具获取按钮并在其中添加 onclick 事件：

$("button.bluebtn").click(function(){
    document.location = 'some-url';
    return false;
});

但如果可以的话，我确实建议将按钮更改为常规链接。让<button>元素充当链接是没有意义的......

Answer 2

如果你真的需要使用<button>标签，你可以添加链接Javascript：

<button onclick="location.href='url_address'">Your HTML content</button> 

我认为使用<a>标签而不是<button>'s 然后用 CSS 设置它们看起来像按钮会更一致。这样，您就可以依赖标记的默认行为，而不必使用 Javascript。

Answer 3

<input type="button" value="click for google" onClick="window.location='http://w­ ww.google.com' ">

或者你可以使用

<button onclick="document.location.href='link';­ return false;">Link Text</button>

Answer 4

我认为您只需使用 href 元素包装按钮，如下所示：

<div class="buttons">
  <a href="your link here"><button class="action bluebtn"><span class="label">CREATE NEW ACCOUNT</span></button></a>
</div>

并对其余按钮执行相同操作。用“a href”标签包装它们。