在css中使用target =“_ blank”

问题描述 投票:48回答:6

我的网站顶部菜单中有外部链接。我想在新标签中打开这些链接。我可以在HTML中使用“target = _blank”来实现它。是否有类似的CSS属性或其他任何东西?

css css3
6个回答
20
投票

很不幸的是,不行。在2013年,没有办法用纯CSS做到这一点。


更新:感谢showdev链接到CSS3 Hyperlinks的过时规范,是的,没有浏览器实现它。所以答案仍然有效。


71
投票

正如c69所提到的,没有办法用纯CSS做到这一点。

但您可以使用HTML代替:

使用

<head>
    <base target="_blank">
</head>

在您的HTML <head>标记中,默认情况下,使所有不包含target属性的页面链接在新的空白窗口中打开。否则你可以为每个链接设置目标属性,如下所示:

    <a href="/yourlink.html" target="_blank">test-link</a>

它会覆盖

<head>
    <base target="_blank">
</head>

标签,如果它是以前定义的。


10
投票

CSS可以通过几种方式“定位”导航。这将使用属性样式设置内部和外部链接的样式,这可以帮助向访问者发出链接将要执行的操作。

a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }  

您还可以定位传统的内联HTML'target = _blank'。

a[target=_blank] { font-weight: bold; } 

另外:目标选择器样式导航块和element targets

nav { display: none; }
nav:target { display: block; }  

CSS:支持目标伪类选择器 - caniusew3schoolsMDN

a[href="http"] { target: new; target-name: new; target-new: tab; }

CSS / CSS3'target-new'属性等,没有任何主流浏览器支持,2017年8月,虽然它是W3 spec since 2004 February的一部分。

W3Schools 'modal' construction,使用':target'伪类,可以包含WP导航。您还可以在target =“_ blank”旁边添加HTML rel="noreferrer and noopener,以改善“新标签”的效果。 CSS暂时不会在标签中打开链接,但this page解释了如何使用jQuery(兼容性可能取决于WP coders)。 MDN在Using the :target pseudo-class in selectors有一个很好的评论


4
投票

使用target="_blank"的另一种方法是:

onclick="this.target='_blank'"

例:

<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>

1
投票

这实际上是javascript但是相关/相关,因为.querySelectorAll以CSS语法为目标:

var i_will_target_self = document.querySelectorAll("ul.menu li a#example")

此示例使用css来定位菜单中的链接,其中id =“example”

这会创建一个变量,它是我们想要更改的元素的集合,但我们仍然通过设置新目标(“_ blank”)来实际更改它们:

for (var i = 0; i < 5; i++) {
i_will_target_self[i].style.target = "_blank";
}

该代码假定有5个或更少的元素。通过更改短语“i <5”可以轻松更改。

在这里阅读更多:http://xahlee.info/js/js_get_elements.html


0
投票

While waiting for the adoption of CSS3 targeting…

在等待主要浏览器采用CSS3定位时,可以在创建(X)HTML后运行以下sed命令:

sed -i 's|href="http|target="_blank" href="http|g' index.html

它会将target="_blank"添加到所有外部超链接。变化也是可能的。

编辑

我使用这个at the end of the makefile生成我网站上的每个网页。

© www.soinside.com 2019 - 2024. All rights reserved.