Question 14919 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

2

Answers


  1. 0

    Set attribute target , _blank after add class like:

    $lnk.attr("target", "_blank").next('span').addClass('external');

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

    Example:

    var $lnk = $('a:not([href^="https://rev.press"]):not([href^="#"]):not([href^="/"])')
$lnk.attr("target", "_blank").next('span').addClass('external');
$(".ext").on("click", function() {
  $(this).prev('a')[0].click();
});
    .external {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  background-image: url('https://rev.press/wp-content/uploads/2022/11/new-tab.svg');
  margin-left: 6px;
  background-size: contain;
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <a href="https://test.com">regular link</a> <span class="ext"></span> and some test text afterwards.
  <a href="https://rev.press">internal link </a> <span class="ext"></span> and some test text afterwards.
</p>

    I slightly change your HTML and CSS, to give a class to span.

    Note:

    1. SO snippet don’t allow to open new tab so Working Fiddle
    2. id must be unique so use class.

    After discussion on comment, updated answer.

    var $lnk = $('a:not([href^="https://rev.press"]):not([href^="#"]):not([href^="/"])');

$.each($lnk, function(index, val) {
  $(this).next('.ext').addClass('external').append("<a 'target'='_blank'  href=" + val + " >")
});
$(".ext").on("click", function(e) {
  var link = $(e.currentTarget).find('a');
  var win = window.open(link.attr('href'), link.attr('target'));
});
    .external {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  background-image: url('https://rev.press/wp-content/uploads/2022/11/new-tab.svg');
  background-size: contain;
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <a href="https://bing.com">Bing</a> <span class="ext"></span> and an <a href="https://rev.press">internal link </a> <span class="ext"></span>.
</p>

<p>
  <a href="https://google.com">Google</a> <span class="ext"></span> and an <a href="https://rev.press/topic/news/">ininternal link

    Updated Fiddle

    Login or Signup to reply.
  2. 0

    First way

    I think you can do something like this:

    1. keep regular link in one anchor tag,
    2. 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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search