在 CSS 中添加 target="_blank"
[英]Add target=“_blank” in CSS
问题描述
I have external links in the top menu of my website.
我的网站顶部菜单中有外部链接。
I want to open these links in new tabs.我想在新标签中打开这些链接。 I could achieve it using target=_blank in HTML.我可以在 HTML 中使用target=_blank来实现它。 Is there a similar CSS property or anything else?是否有类似的 CSS 属性或其他任何东西？
6 个解决方案
解决方案1
93 2014-01-11 18:16:00
As c69 mentioned there is no way to do it with pure CSS.正如 c69 所提到的，纯 CSS 无法做到这一点。
but you can use HTML instead:但您可以改用 HTML：
use采用
<head>
<base target="_blank">
</head>
in your HTML <head> tag for making all of page links which not include target attribute to be opened in a new blank window by default.在您的 HTML <head>标签中，默认情况下，所有不包含target属性的页面链接都在新的空白窗口中打开。 otherwise you can set target attribute for each link like this:否则，您可以为每个链接设置目标属性，如下所示：
<a href="/yourlink.html" target="_blank">test-link</a>
and it will override它会覆盖
<head>
<base target="_blank">
</head>
tag if it was defined previously.如果之前定义过标记。
解决方案2
42 已采纳 2013-06-24 17:35:08
Unfortunately, no.不幸的是，没有。 In 2013, there is no way to do it with pure CSS.在 2013 年，没有办法用纯 CSS 来做到这一点。
Update : thanks to showdev for linking to the obsolete spec of CSS3 Hyperlinks , and yes, no browser has implemented it.更新：感谢showdev链接到过时的CSS3 Hyperlinks规范，是的，没有浏览器实现它。 So the answer still stands valid.所以答案仍然有效。
解决方案3
11 2017-04-23 02:38:15
There are a few ways CSS can 'target' navigation. CSS 可以通过几种方式“定位”导航。 This will style internal and external links using attribute styling, which could help signal visitors to what your links will do.这将使用属性样式设置内部和外部链接的样式，这有助于向访问者表明您的链接将执行的操作。
a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }
You can also target the traditional inline HTML 'target=_blank'.您还可以定位传统的内联 HTML 'target=_blank'。
a[target=_blank] { font-weight: bold; }
Also :target selector to style navigation block and element targets .另外：目标选择器来设置导航块和元素目标的样式。
nav { display: none; }
nav:target { display: block; }
CSS :target pseudo-class selector is supported - caniuse , w3schools , MDN . CSS :target 伪类选择器被支持 - caniuse , w3schools , MDN 。
a[href="http"] { target: new; target-name: new; target-new: tab; }
CSS/CSS3 ' target-new ' property etc, not supported by any major browsers, 2017 August, though it is part of the W3 spec since 2004 February . CSS/CSS3 ' target-new ' 属性等，不受任何主要浏览器支持，2017 年 8 月，尽管它自 2004 年 2 月起成为W3 规范的一部分。
W3Schools 'modal' construction , uses ':target' pseudo-class that could contain WP navigation. W3Schools 'modal' 构造，使用可包含 WP 导航的 ':target' 伪类。 You can also add HTML rel="noreferrer and noopener beside target="_blank" to improve 'new tab' performance. CSS will not open links in tabs for now, but this page explains how to do that with jQuery (compatibility may depend for WP coders ). MDN has a good review at Using the :target pseudo-class in selectors您还可以在 target="_blank" 旁边添加 HTML rel="noreferrer 和 noopener " 以提高“新标签”的性能。CSS 目前不会在标签中打开链接，但此页面解释了如何使用 jQuery 做到这一点（兼容性可能取决于WP coders ). MDN 在Using the :target pseudo-class in selectors上有很好的评论
解决方案4
3 2014-05-22 05:50:55
Another way to use target="_blank" is:另一种使用target="_blank"是：
onclick="this.target='_blank'"
Example:例子：
<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>
解决方案5
1 2014-06-11 11:17:34
While waiting for the adoption of CSS3 targeting…在等待采用 CSS3 定位的同时……
While waiting for the adoption of CSS3 targeting by the major browsers, one could run the following sed command once the (X)HTML has been created:在等待主流浏览器采用 CSS3 定位时，一旦 (X)HTML 被创建，您可以运行以下sed命令：
sed -i 's|href="http|target="_blank" href="http|g' index.html
It will add target="_blank" to all external hyperlinks.它会将target="_blank"添加到所有外部超链接。 Variations are also possible.变化也是可能的。
EDIT编辑
I use this at the end of the makefile which generates every web page on my site.我在生成我网站上每个网页的makefile的末尾使用它。
解决方案6
1 2014-08-21 16:43:44
This is actually javascript but related/relevant because .querySelectorAll targets by CSS syntax:这实际上是 javascript 但相关/相关，因为 .querySelectorAll 通过 CSS 语法定位：
var i_will_target_self = document.querySelectorAll("ul.menu li a#example")
this example uses css to target links in a menu with id = "example"此示例使用 css 定位菜单中 id = "example" 的链接
that creates a variable which is a collection of the elements we want to change, but we still have actually change them by setting the new target ("_blank"):它创建了一个变量，它是我们想要更改的元素的集合，但我们仍然通过设置新目标（“_blank”）来实际更改它们：
for (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}
That code assumes that there are 5 or less elements.该代码假设有 5 个或更少的元素。 That can be changed easily by changing the phrase "i < 5."这可以通过更改短语“i < 5”轻松更改。
read more here: http://xahlee.info/js/js_get_elements.html在此处阅读更多信息： http : //xahlee.info/js/js_get_elements.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.