Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add target=”_blank” to a link using jQuery?
We can add the target attribute to a link using jQuery by selecting the desired link using a selector, such as the class or id. Then, we can use the .attr() method to add the target attribute and set its value to "_blank". This will ensure that when the link is clicked, it will open in a new tab or window.
Let us first understand what jQuery is. jQuery is a JavaScript library that simplifies HTML document traversing, event handling, and animation. It allows for easy manipulation of the Document Object Model (DOM).
It also provides several shorthand methods for common JavaScript tasks, such as making AJAX requests. It is widely used in web development to create interactive and dynamic user interfaces. It can be easily integrated with other libraries and frameworks.
What does target=”_blank” essentially mean?
The target attribute "target='_blank'" is used in HTML links to specify where the linked document should be opened.
When the target attribute is set to "_blank", the linked document will open in a new browser window or tab. This means that the user will not leave the current page or lose their current browsing context, and can easily return to the original page after viewing the linked content.
It's useful when you want to open a link in a new tab or window, so the user can easily switch back and forth between the current page and the linked page without losing their place.
Approach
You can add the target attribute "target='_blank'" to a link using jQuery by selecting the link and using the .attr() method to set the target attribute.
Here is an example −
$(document).ready(function(){
$("a").attr("target", "_blank");
});
In this example, the script selects all "a" elements on the page and sets the target attribute to "_blank".
You can also use the .prop() method instead of the .attr() method, which is more efficient and recommended in modern versions of jQuery −
$(document).ready(function(){
$("a").prop("target", "_blank");
});
You can also use a more specific selector to target specific links.
For example, if you only want to add the target attribute to links with a class of "new-tab", you can use the following code −
$(document).ready(function(){
$("a.new-tab").prop("target", "_blank");
});
Example
Here is a full working example of adding the target attribute "target='_blank'" to a specific group of links using jQuery −
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="https://google.com" class="new-tab">Google</a>
<a href="https://facebook.com">Facebook</a>
<a href="https://twitter.com" class="new-tab">Twitter</a>
<script>
$(document).ready(function(){
$("a.new-tab").prop("target", "_blank");
});
</script>
</body>
</html>
Explanation
In this example, the script selects all "a" elements on the page that have a class of "new-tab" and sets the target attribute to "_blank". So when you click on the links "Google" and "Twitter" they will open in new tab because they have the class new-tab but if you click on Facebook link it will open in the same tab.
5K+ Views
