Last Updated on August 5, 2022 by Roshan Parihar
In this tutorial, learn how to open link in new tab on button click using jQuery. The short answer is: use jQuery window.open() function with link as the first argument and _blank as the second argument.
You can open the internal link in the same window. However, somewhere you may require to open the internal link in the new tab. Again it’s the best practice for any blogger to open the external link in the new tab.
But, how you can create a button with a link and open the link in the new tab of the browser? To get the answer to this question, keep reading this post. You may also like to read how to create an anchor link button using Bootstrap.
jQuery Open Link in New Tab on Button Click
To open the button link in the new tab, you have to use the onclick attribute with the button. Add the jQuery window.open() in the onclick attribute of the button. The onclick attribute works when someone clicks on the button.
Now, You have to add two arguments in the jQuery window.open() function.
The first argument of the function requires adding the URL and the second takes _blank. See the example below to create your own anchor link button.
|
1 |
<button type="button" onclick="window.open('https://tutorialdeep.com/sql/', '_blank');">Visit SQL Tutorial</button> |
Output
The above example contains the button with the URL in the onclick attribute of HTML. Click the above button that takes you to the new tab with the link opened.
How to Open Button Link in New Tab Using Bootstrap
To create a bootstrap button open the link in a new tab, you have to use the <a> element with class .btn.btn-primary and attribute target="_blank" as given below.
If you want to learn more about create buttons using Bootstrap, you can read our tutorial on Bootstrap buttons.
|
1 |
<a href="https://tutorialdeep.com/" target="_blank" class="btn btn-primary" rel="noopener">Visit TutorialDeep</a> |
Output
The above example shows that you can easily create anchor link button using Bootstrap. When you click the button given above, it will open the link in a new tab.
You May Also Like to Read
- How to open a link in a new tab using anchor tag target attribute
- Remove Anchor tag Link from Div Using jQuery
- How to Insert mailto in Anchor tag Link Using HTML
I hope you like this tutorial on how to open links in a new tab using jQuery and Bootstrap.
References