有没有办法让一个<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' })