你如何使HTML按钮表现得像一个超链接?

时间:2022-03-16 23:56:34

How do you make an HTML button behave just like a hyperlink where, if you click on it, it will open a browser window showing a page you want?

如何使HTML按钮的行为就像一个超链接,如果你点击它,它会打开一个显示你想要的页面的浏览器窗口?

I understand this much. I think I will use this but instead of a link to some javascript code inside the quotes for "onclick" I want to put something simple that will launch a new browser window.

我明白这一点。我想我会用这个而不是链接到“onclick”引号内的一些javascript代码我想放一些简单的东西来启动一个新的浏览器窗口。

6 个解决方案

#1


21  

onclick and window.open

onclick和window.open

<input type="button" onclick="window.open('http://www.example.com','_blank','resizable=yes')" />

#2


9  

In Head:  
<script>
openNewWindow = function()
{
 window.open(url, "_blank");
};
</script>
In Body:    
<input type="button" onclick="openNewWindow()" >

I prefer to define a function named openNewWindow() instead of putting the code in the input tag. This is for organization. I highly recommend you do this if you're planning on having many different buttons for opening different windows.

我更喜欢定义一个名为openNewWindow()的函数,而不是将代码放在输入标记中。这是为了组织。如果您打算使用许多不同的按钮来打开不同的窗口,我强烈建议您这样做。

#3


9  

I think this is the best solution for you.

我认为这是最适合您的解决方案。

Try this out

试试吧

<a href="http://www.stackoverlfow.com" target="_"><input 
type="button" value="Click Me"/></a>

Happy Coding!!

快乐编码!!

#4


2  

You could do something like this:

你可以这样做:

window.open(url, "window-name", "menubar=no,innerWidth=600,innerHeight=600,toolbar=no,location=no,screenX=400,screenY=40");

Passing a name to the open method causes the browser to open a new window. The third argument defines the looks of the new window.

将名称传递给open方法会导致浏览器打开一个新窗口。第三个参数定义新窗口的外观。

#5


2  

<input type="button" value="Google"
       onclick="window.open('http://www.google.com', '_blank');" />

#6


0  

I'm 7 years late, I realize, but I had a similar issue and thought I comment for those who may follow.

我意识到,我已经迟到了7年,但我遇到了类似的问题,并且认为我会对那些可能会效仿的人发表评论。

If you're using Bootstrap, you can attach Bootstrap button classnames to anchor tags and make them look just like buttons:

如果您正在使用Bootstrap,则可以将Bootstrap按钮类名附加到锚标记,并使它们看起来像按钮:

<a href="path/file.ext" class="btn btn-md btn-link">I Look Like A Button</a>

我看起来像一个按钮

Bootstrap supports basic sizes as well, including btn-sm or btn-lg. Granted, not everyone uses Bootstrap but even then the default styles are free, easy to find, and can be copied into your own stylesheet even if you're using a custom boilerplate layout.

Bootstrap也支持基本大小,包括btn-sm或btn-lg。不过,并非所有人都使用Bootstrap,但即使这样,默认样式也是免费的,易于查找,即使您使用的是自定义样板布局,也可以将其复制到您自己的样式表中。

#1


21  

onclick and window.open

onclick和window.open

<input type="button" onclick="window.open('http://www.example.com','_blank','resizable=yes')" />

#2


9  

In Head:  
<script>
openNewWindow = function()
{
 window.open(url, "_blank");
};
</script>
In Body:    
<input type="button" onclick="openNewWindow()" >

I prefer to define a function named openNewWindow() instead of putting the code in the input tag. This is for organization. I highly recommend you do this if you're planning on having many different buttons for opening different windows.

我更喜欢定义一个名为openNewWindow()的函数,而不是将代码放在输入标记中。这是为了组织。如果您打算使用许多不同的按钮来打开不同的窗口,我强烈建议您这样做。

#3


9  

I think this is the best solution for you.

我认为这是最适合您的解决方案。

Try this out

试试吧

<a href="http://www.stackoverlfow.com" target="_"><input 
type="button" value="Click Me"/></a>

Happy Coding!!

快乐编码!!

#4


2  

You could do something like this:

你可以这样做:

window.open(url, "window-name", "menubar=no,innerWidth=600,innerHeight=600,toolbar=no,location=no,screenX=400,screenY=40");

Passing a name to the open method causes the browser to open a new window. The third argument defines the looks of the new window.

将名称传递给open方法会导致浏览器打开一个新窗口。第三个参数定义新窗口的外观。

#5


2  

<input type="button" value="Google"
       onclick="window.open('http://www.google.com', '_blank');" />

#6


0  

I'm 7 years late, I realize, but I had a similar issue and thought I comment for those who may follow.

我意识到,我已经迟到了7年,但我遇到了类似的问题,并且认为我会对那些可能会效仿的人发表评论。

If you're using Bootstrap, you can attach Bootstrap button classnames to anchor tags and make them look just like buttons:

如果您正在使用Bootstrap,则可以将Bootstrap按钮类名附加到锚标记,并使它们看起来像按钮:

<a href="path/file.ext" class="btn btn-md btn-link">I Look Like A Button</a>

我看起来像一个按钮

Bootstrap supports basic sizes as well, including btn-sm or btn-lg. Granted, not everyone uses Bootstrap but even then the default styles are free, easy to find, and can be copied into your own stylesheet even if you're using a custom boilerplate layout.

Bootstrap也支持基本大小,包括btn-sm或btn-lg。不过,并非所有人都使用Bootstrap,但即使这样,默认样式也是免费的,易于查找,即使您使用的是自定义样板布局,也可以将其复制到您自己的样式表中。