如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
对于Nicolas的回答,以下内容对我有用,因为该回答没有type=“button”,因此它开始表现为提交类型。。。因为我已经有一个提交类型。这对我不起作用。。。现在,您可以向按钮或<a>添加一个类以获得所需的布局:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
其他回答
在浏览器控制台中键入window.location并按Enter键。然后,您可以清楚地知道位置包含:
hash: ""
host: "stackoverflow.com"
hostname: "stackoverflow.com"
href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-
that-acts-like-a-link"
origin: "https://stackoverflow.com"
pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
port: ""
protocol: "https:"
您可以从这里设置任何值。
因此,对于重定向另一个页面,可以使用链接设置href值。
window.location.href = your link
在您的案例中:
<button onclick="window.location.href='www.google.com'">Google</button>
另一个选项是在按钮中创建链接:
<button type="button"><a href="yourlink.com">Link link</a></button>
然后使用CSS来设置链接和按钮的样式,使链接占据按钮内的全部空间(这样用户就不会错过点击):
button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}
我在这里创建了一个演示。
请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。
只需将按钮放在参考标签内。,
<a href="https://www.google.com/"><button>Next</button></a>
这似乎非常适合我,并且没有添加任何%20标签到链接中,只是你想要的。我使用了一个到谷歌的链接来演示。
当然,您可以将其包装在表单标记中,但这不是必需的。
当链接另一个本地文件时,只需将其放在同一文件夹中并添加文件名作为引用即可。如果不在同一文件夹中,请指定文件的位置。
<a href="myOtherFile"><button>Next</button></a>
这也不会在URL的结尾添加任何字符,但在以文件名结尾之前,它确实将文件项目路径作为URL。例如
如果我的项目结构是。。。
..表示文件夹\
表示文件而四|表示父文件夹中的子目录或文件
平民的|||| ..html格式|||||||-main.html|||||||-ssecondary.html
如果我打开main.html文件,
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
然而,当我单击main.html中的按钮以更改为secondary.html时,URL将是,
http://localhost:0000/public/html/secondary.html
URL末尾不包含特殊字符。
顺便说一句-(%20表示URL中的一个空格,它编码并插入到它们的位置。)
注意:localhost:0000显然不是0000。您将有自己的端口号。
此外_ijt=xxxxxxxxxxxxxx在main.html URL的末尾,x由您自己的连接决定,因此显然它不等于我的连接。
我似乎在陈述一些非常基本的观点,但我只想尽可能地解释清楚。
Use:
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
不幸的是,这种标记在HTML5中不再有效,既不能验证,也不能始终按预期工作。使用另一种方法。
<button onclick=“location.href='http://www.example.com'“type=”按钮“>www.example.com</button>
请注意,type=“button”属性很重要,因为它缺少的默认值是SubmitButton状态。