有没有办法让一个<button>元素链接到一个位置,而不是包装在一个<a href …标签?

只是想知道是否有一种方法来获得一个HTML <button>元素链接到一个位置,而不是包装在一个<a href...标签?

button目前看起来像:

 <button>Visit Page Now</button> 

希望有:

 <a href="link.html"><button>Visit Page Now</button></a> 

该button没有在表单中使用,所以<input type="button">不是一个选项。 我只是好奇,看看有没有办法链接这个特定的元素,而不需要把它包装在一个<a href标签。

期待听到一些select/意见。

内联Javascript:

 <button onclick="window.location='http://www.example.com';">Visit Page Now</button> 

用Javascript定义一个函数:

 <script> function visitPage(){ window.location='http://www.example.com'; } </script> <button onclick="visitPage();">Visit Page Now</button> 

或在JQuery中

 <button id="some_id">Visit Page Now</button> $('#some_id').click(function() { window.location='http://www.example.com'; }); 

这是一个解决scheme,即使在禁用JavaScript的情况下也能正常工作:

 <form action="login.html"> <button type="submit">Login</button> </form> 

诀窍是用自己的<form>标签包围button。

我个人比较喜欢<button>标签,但也可以使用<input>来完成:

 <form action="login.html"> <input type="submit" value="Login"/> </form> 

只要做到这一点

 <button OnClick=" location.href='link.html' ">Visit Page Now</button> 

虽然,我已经触摸了JavaScript已经有一段时间了 – 也许location.href已经过时了吗? 无论如何,这就是我将如何做到这一点。

那么,对于一个链接,必须有一个链接标签。 你也可以做的是,为button做一个CSS类,并将该类分配给链接标记。 喜欢,

CSS

 #btn{ background:url(images/button.jpg) no-repeat 0 0; display:block; width:50px; height:20px; border:none; outline:none;} 

HTML

 <a href="btnlink.html" id="btn"></a> 

你可以使它成为一个非提交button( <button type="button"> ),并将诸如window.location = 'http://where.you.want/to/go'插入到它的onclick处理程序中。 这不起作用,但JavaScript启用。

或者你可以使它成为一个提交button,并在服务器上做一个redirect,虽然这显然需要某种服务器端的逻辑,但好处是不需要JavaScript。

(实际上,忘记第二个解决scheme – 如果你不能使用表单,那么提交button就没有了)

<form action="portfolio.html"> <button type="link" class="btn btn-primary btn-lg">View Work</button> </form>

我只是想到了这一点,它完全链接到另一个页面,没有我的默认链接设置骑我的button类! 🙂

只是一个侧面说明 – 你可能要考虑<a href>默认情况下知道的技巧,但JavaScript链接不会为你做。 即:

  • 如果用Ctrl点击,将会打开一个新的标签;
  • 如果用Shift单击,浏览器会在新窗口中打开链接;
  • 如果用Alt点击,这是一个“下载目标”命令。

现在,如果你不想模拟所有的行为,我build议使用<a href>并且一个button一样的样式,因为button本身大致是一个形状和hover效果。 我认为,如果只有“button,没有别的东西”在语义上不重要,那么<a href>就是武士的方式。 如果您担心语义和可读性,那么也可以在文档准备就绪()时replacebutton元素。 这是清楚和安全的。

这里是使用jQuery。 在http://jsfiddle.net/sQnSZ/看到它的行动;

 <button id="x">test</button> $('#x').click(function(){ location.href='http://cnn.com' })