Need css/jquery help adding 'open in new tab' functionality to span tag inside anchor link-CodePudding

I've got as far on this as I can with my own knowledge and looking things up online.

I want to automatically (through jquery/css) add an icon after external links that will cause the link to open in a new tab. So the reader can click the anchor text to open the regular link, or click on the icon to open the link in a new tab.

So far I've gotten an icon in a span tag to appear after external links.

What I need is... probably jquery? that will cause any clicks on the icon (in a span tag, id="ext") to open in a new tab.

Here's the fiddle so far:

https://jsfiddle.net/christophera/c0byn9w8/32/

Goal - The regular link (anchor text) should open in the same window. Mousing over the icon needs to display "open in new tab" and that needs to be the result when the icon is clicked on.

Appreciate any help in getting this accomplished!

Chris

$('a:not([href^="https://google.com"]):not([href^="#"]):not([href^="/"])').addClass('external');

.external span:last-child {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: bottom;
background-image: url('https://i.ibb.co/vvyC5JS/new-tab-60.png');
margin-left: 2px;
background-size: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
This is <a href="https://test.com">the link<span id="ext"></span></a> and some test text afterwards.
</p>

CodePudding user response：

Set attribute target , _blank after add class like:

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

To click span to open link on new tab, find previous anchor tag and trigger click.

Example:

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

$("#ext").on("click", function() {
  $(this).prev('a').trigger('click')
});

.external span:last-child {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  background-image: url('https://i.ibb.co/vvyC5JS/new-tab-60.png');
  margin-left: 2px;
  background-size: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
  This is <a href="https://test.com">the link<span id="ext"></span></a> and some test text afterwards.
</p>

Note: SO snippet don't allow to open new tab so Working Fiddle

CodePudding user response：

First way

I think you can do something like this:

keep regular link in one anchor tag,
and in another anchor tag keep the same link but with target="_blank" attribute to open this link in new page, and inside tha anchor tag insert the image so that clicking on that icon opens the link in new page

<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>

Check this: https://jsfiddle.net/dscmr6g7/1/

Second Way

Or set that attribute using jquery like this

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