JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<a id="google" href="http://www.google.com">Google</a><p>

<a id="facebook" href="http://www.facebook.com">Facebook</a><p>

<!-- Normal Link without jQuery-->

<a href="http://www.yahoo.com">Yahoo</a>

CSS

p {
    margin-top: 5%;
}

JavaScript

/*
$(function () {
    $("#google").attr("target", "_blank");
    $("#facebook").attr("target", "_blank");
});
*/

// With .prop();
/*
$(function () {
    $("#google").prop("target", "_blank");
    $("#facebook").prop("target", "_blank");
});
*/

// Awesome? :x

// javaScript pure

function initLinks() {
  for (i in document.links) {
    link = document.links[i];
    if (link.rel && link.rel.indexOf('external')!=-1) {
      link.onclick = onExternalLinkActivate;
      link.onkeypress = onExternalLinkActivate;
    }
  }
}

function onExternalLinkActivate() {
  window.open(this.href);
  return false;
}

window.onload = initLinks;