JQuery code to open a link in new tab

Question

I wanted to edit slider buttons of Sydney theme(wordpress) to have separate links for each button and I found the following JQuery code. This code works well but opens the links in the current page. Now, I want to edit this code to open the links in a new tab. How could I do it?

jQuery(function($) {

  //Define the new buttons. Delete the lines you don't need
  var button1 = '<a href="http://www.google.com" class="roll-button button-slider">Read More</a>'; //Slide 1
  var button2 = '<a href="http://www.yahoo.com" class="roll-button button-slider">Read More</a>'; //Slide 2
  var button3 = '<a href="http://example.org" class="roll-button button-slider">Button 3</a>'; //Slide 3
  var button4 = '<a href="http://example.org" class="roll-button button-slider">Button 4</a>'; //Slide 4
  var button5 = '<a href="http://example.org" class="roll-button button-slider">Button 5</a>'; //Slide 5

  //Hide the default button
  $('.slide-inner a').hide();

  //Add the new buttons. Delete the lines you don't need
  $('.slide-item:nth-of-type(1) .slide-inner').append(button1); //Slide 1
  $('.slide-item:nth-of-type(2) .slide-inner').append(button2); //Slide 2
  $('.slide-item:nth-of-type(3) .slide-inner').append(button3); //Slide 3
  $('.slide-item:nth-of-type(4) .slide-inner').append(button4); //Slide 4
  $('.slide-item:nth-of-type(5) .slide-inner').append(button5); //Slide 5
});

Possible duplicate of [How to open link in new tab on html?](http://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html) — Sojtin, Feb 28 '17 at 07:34
http://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html — lordkain, Feb 28 '17 at 07:34
Possible duplicate of [Open new tab in javascript](http://stackoverflow.com/questions/7924232/open-new-tab-in-javascript) — Ashish Bahl, Feb 28 '17 at 08:29

score 2 · Answer 1 · answered Feb 28 '17 at 07:35

Add target="_blank" to all link elements

   var button1 = '<a target="_blank" href="http://www.google.com" class="roll-button button-slider">Read More</a>'; //Slide 1
   var button2 = '<a target="_blank" href="http://www.yahoo.com" class="roll-button button-slider">Read More</a>'; //Slide 2
   var button3 = '<a target="_blank" href="http://example.org" class="roll-button button-slider">Button 3</a>'; //Slide 3
   var button4 = '<a target="_blank" href="http://example.org" class="roll-button button-slider">Button 4</a>'; //Slide 4
   var button5 = '<a target="_blank" href="http://example.org" class="roll-button button-slider">Button 5</a>'; //Slide 5

score 2 · Answer 2 · answered Feb 28 '17 at 07:35

target="_blank" is what you need:

   //Define the new buttons. Delete the lines you don't need
   var button1 = '<a href="http://www.google.com" target="_blank" class="roll-button button-slider">Read More</a>'; //Slide 1

etc..

for more information - have a look here: https://developer.mozilla.org/en/docs/Web/HTML/Element/a#Attributes

score 2 · Accepted Answer · answered Feb 28 '17 at 07:36

You need to set target for that.

jQuery(function($) {

  //Define the new buttons. Delete the lines you don't need
  var button1 = '<a target="_blank" href="http://www.google.com" class="roll-button button-slider">Read More</a>'; //Slide 1
  var button2 = '<a target="_blank" href="http://www.yahoo.com" class="roll-button button-slider">Read More</a>'; //Slide 2
  var button3 = '<a target="_blank" href="http://example.org" class="roll-button button-slider">Button 3</a>'; //Slide 3
  var button4 = '<a target="_blank" href="http://example.org" class="roll-button button-slider">Button 4</a>'; //Slide 4
  var button5 = '<a target="_blank" href="http://example.org" class="roll-button button-slider">Button 5</a>'; //Slide 5

  //Hide the default button
  $('.slide-inner a').hide();

  //Add the new buttons. Delete the lines you don't need
  $('.slide-item:nth-of-type(1) .slide-inner').append(button1); //Slide 1
  $('.slide-item:nth-of-type(2) .slide-inner').append(button2); //Slide 2
  $('.slide-item:nth-of-type(3) .slide-inner').append(button3); //Slide 3
  $('.slide-item:nth-of-type(4) .slide-inner').append(button4); //Slide 4
  $('.slide-item:nth-of-type(5) .slide-inner').append(button5); //Slide 5
});

score 1 · Answer 4 · answered Feb 28 '17 at 07:33

1

use target=_blank attribute of html as

<a target="_blank" href="http://www.google.com" class="roll-button button-slider">Read More</a>

answered Feb 28 '17 at 07:33

RAUSHAN KUMAR

5,846
4
34
70

JQuery code to open a link in new tab

4 Answers4