有没有办法让一个<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/意见。

  • 有没有一个规范,元素的id应该是全局变量?
  • 如何防止长词的打破我的div?
  • Flexbox不给与元素相同的宽度
  • 用javascript创build唯一的ID
  • 如何用\ r&\ nreplace为?
  • 隐藏属性(HTML5)和display:none规则(CSS)之间有什么区别?
  • 可以在HTML <select>标签中select<optgroup>
  • 我可以写一个CSSselect器来select没有特定类的元素吗?
  • 8 Solutions collect form web for “有没有办法让一个<button>元素链接到一个位置,而不是包装在一个<a href …标签?”

    内联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/看到它的行&#x52A8;

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