需要css/jquery帮助来添加“在新标签中打开”功能以跨越锚链接内的标记

1l5u6lss  于 2022-12-12  发布在  jQuery
关注(0)|答案(2)|浏览(145)

我已经尽我所能用我自己的知识和网上查找的东西。
我想自动(通过jquery/css)在外部链接后面添加一个图标,这样链接就会在新标签页中打开,读者可以点击锚文本打开常规链接,或者点击图标在新标签页中打开链接。
到目前为止,我已经在span标记中获得了一个图标,它出现在外部链接之后。
我需要的是...可能是jquery?,它将导致在图标(在span标记中,id=“ext”)上的任何单击都在一个新的选项卡中打开。
这是目前为止的小提琴:
https://jsfiddle.net/christophera/c0byn9w8/32/
目标-常规链接(锚文本)应该在同一个窗口中打开。鼠标悬停在图标上需要显示“在新选项卡中打开”,这需要是点击图标时的结果。
感谢任何帮助,让这完成!
克里斯
第一个

wpcxdonn

wpcxdonn1#

"第一条路"
我想你可以这样做:
1.在一个锚标签中保持规则链接,
1.并在另一个锚标记中保留相同的链接,但带有target="_blank"属性,以便在新页面中打开此链接,并在锚标记中插入图像,以便单击该图标在新页面中打开链接

<p>
  <a href="https://test.com">regular link</a>
  <a href="https://test.com" target ="_blank"><span id="ext"></span></a> 
  and some test text afterwards.
</p>

请检查:https://jsfiddle.net/dscmr6g7/1/

第二条路

或者像这样使用jquery设置该属性

$('a:not([href^="https://rev.press"]):not([href^="#"]):not([href^="/"])').addClass('external').attr("target","_blank");
klr1opcd

klr1opcd2#

设置属性target,_blank后添加类如:

$('a:not([href^="https://rev.press"]):not([href^="#"]):not([href^="/"])').addClass('external').attr("target","_blank");

要单击span以在新选项卡上打开链接,请找到上一个锚标记并触发单击
示例:
第一个
注:SO代码段不允许打开新选项卡,因此Working Fiddle

相关问题