在新选项卡中打开链接的 HTML 按钮
[英]HTML button thats opens link in new tab
问题描述
Here is what I am trying to do.
这就是我想要做的。
I want to set up an HTML button that will open a link https://example.com in a new tab.我想设置一个 HTML 按钮，它将在新选项卡中打开一个链接https://example.com 。
I have a button set up here .我在这里设置了一个按钮。 I can use JS, CSS, HTML, and everything else.我可以使用 JS、CSS、HTML 和其他任何东西。
This is what I have come up with.这是我想出的。
<a href="/" target="_blank">
<button class="pure-material-button-contained">Visit my website</button>
</a>
Here is my code so far:到目前为止，这是我的代码：
<!DOCTYPE html> <html lang=en> <head> <style> .pure-material-button-contained { position: relative; display: inline-block; box-sizing: border-box; border: none; border-radius: 4px; padding: 0 16px; min-width: 64px; height: 36px; vertical-align: middle; text-align: center; text-overflow: ellipsis; text-transform: uppercase; color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255)); background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243)); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system); font-size: 14px; font-weight: 500; line-height: 36px; overflow: hidden; outline: none; cursor: pointer; transition: box-shadow 0.2s; } .pure-material-button-contained::-moz-focus-inner { border: none; } /* Overlay */ .pure-material-button-contained::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255)); opacity: 0; transition: opacity 0.2s; } /* Ripple */ .pure-material-button-contained::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; padding: 50%; width: 32px; /* Safari */ height: 32px; /* Safari */ background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255)); opacity: 0; transform: translate(-50%, -50%) scale(1); transition: opacity 1s, transform 0.5s; } /* Hover, Focus */ .pure-material-button-contained:hover, .pure-material-button-contained:focus { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .pure-material-button-contained:hover::before { opacity: 0.08; } .pure-material-button-contained:focus::before { opacity: 0.24; } .pure-material-button-contained:hover:focus::before { opacity: 0.3; } /* Active */ .pure-material-button-contained:active { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .pure-material-button-contained:active::after { opacity: 0.32; transform: translate(-50%, -50%) scale(0); transition: transform 0s; } /* Disabled */ .pure-material-button-contained:disabled { color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38); background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12); box-shadow: none; cursor: initial; } .pure-material-button-contained:disabled::before { opacity: 0; } .pure-material-button-contained:disabled::after { opacity: 0; } </style> <link rel="icon" sizes="192x192" href="https://i.ibb.co/J59P0h4/58097612.jpg"> <link rel="shortcut icon" href="https://i.ibb.co/J59P0h4/58097612.jpg" type="image/x-icon"/> <link rel="apple-touch-icon" href="https://i.ibb.co/J59P0h4/58097612.jpg" type="image/x-icon"/> <meta content="https://3kh0.github.io/" property="og:url" /> <meta content="https://i.ibb.co/J59P0h4/58097612.jpg" property="og:image" /> <meta content="#00FF00" data-react-helmet="true" name="theme-color" /> <meta name="title" content="Dev"> <meta name="description" content="Woah there! You might have typed the URL wrong!"> <meta name="keywords" content="games, ad blocker, trolls, unblocked games, web games, online games, fun, tags"> <meta name="robots" content="index, follow"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="language" content="English"> <meta name="revisit-after" content="1 days"> <meta name="author" content="3kh0"> <meta charset=utf-8> <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width"> <title>Error 404 (Not Found)!!1</title> </head> <body> <a href="https://3kh0.github.io" target="_blank"> <button class="pure-material-button-contained">Visit my website</button> </a> </body> </html>
This is CSS from the Google contained buttons.这是来自 Google 包含的按钮的 CSS。
You can view it here: https://material.io/components/buttons你可以在这里查看： https : //material.io/components/buttons
4 个解决方案
解决方案1
1 已采纳 2021-10-12 21:21:21
Just use anchor tag instead.只需使用锚标记。
<a href="https://example.com" target="_blank">Click Here</a>
For navigation just use anchor tags, Feel free to style it as a button and let it use it's href attribute well, Only use button when it represents a real button, Such as (Play, Pause, Start..etc)对于导航，只需使用锚标记，随意将其样式设置为按钮并让它很好地使用它的 href 属性，仅当它代表真正的按钮时才使用按钮，例如（播放，暂停，开始......等）
If you insist, Just use the window.open function如果你坚持，只需使用 window.open 函数
button.addEventListener("click", () => window.open("https://example.com", "_blank"));
解决方案2
0 2021-10-12 21:18:03
You can do it by a JS function, just like this你可以通过一个JS函数来完成，就像这样
<button onclick="openExampleTab()">
Open my Tab
</button>
<script>
function openExampleTab() {
window.open("https://example.com", "_blank");
}
</script>
Or you can use anchor tag with the href attribute pointing to your page:或者您可以使用带有 href 属性的锚标记指向您的页面：
<a href="https://example.com" target="_blank">Open my tab</a>
解决方案3
0 2021-10-12 21:37:16
a { background: #0a95ff; color: white; padding: 5px 15px; border-radius: 5px; text-decoration: none; }
<a href="https://example.com">Example</a>
解决方案4
0 2021-10-13 08:25:30
Just add a target="_blank" attribute to your anchor tag:只需将 target="_blank" 属性添加到您的锚标记：
<button><a href="https://example.com" target="_blank">Click here to open in new tab</a></button>
It can also open in new window, depending on your browser settings.它也可以在新窗口中打开，具体取决于您的浏览器设置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.