[英]Implementing link into HTML/CSS button
I need to add a link into these buttons: 我需要在以下按钮中添加链接:
<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>
Can somebody help me? 有人可以帮我吗?
You have several options here, depending on whether you can change the HTML: 根据是否可以更改HTML,您可以在此处选择几个选项:
If you can change the HTML make the buttons into a regular <a href="http://www....">link</a>
or you can add an onclick event: 如果您可以更改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>
If you can't change the HTML, grab the buttons using something like jQuery and add the onclick event there: 如果您无法更改HTML,请使用类似jQuery的按钮抓取按钮,然后在其中添加onclick事件:
$("button.bluebtn").click(function(){
document.location = 'some-url';
return false;
});
But I do recommend changing the buttons into regular links if you can. 但是我建议您尽可能将按钮更改为常规链接。 Having
<button>
elements acting as links makes no sense... 让
<button>
元素充当链接没有任何意义...
If you really need to use the <button>
tag you can add the link with Javascript
: 如果确实需要使用
<button>
标记,则可以使用Javascript
添加链接:
<button onclick="location.href='url_address'">Your HTML content</button>
I think it would be more consistent thought to use <a>
tags instead of <button>
's and then style them with CSS to look like the buttons. 我认为使用
<a>
标记而不是<button>
,然后使用CSS设置它们的样式以使其看起来更像按钮。 This way you rely on the default behavior of your markup and avoid having to use Javascript. 这样,您就可以依赖标记的默认行为,而不必使用Javascript。
<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>
I think you just wrap the button with a href element like the following: 我认为您只需使用href元素包装按钮,如下所示:
<div class="buttons">
<a href="your link here"><button class="action bluebtn"><span class="label">CREATE NEW ACCOUNT</span></button></a>
</div>
and do same for rest of the buttons. 其余按钮也一样。 Wrap them with "a href" tag.
用“ a href”标签将它们包装起来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.