This creates a button link with JQuery or JavaScript; and when click on this button, it opens an URL in a new tab. It’s useful when we create a download link, external link or a page takes long time to respond.

Example JQuery Open A New Tab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo JavaScript Open A New Tab With JQuery</title>
<meta name="robots" content="noindex, nofollow" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>
	<a href="javascript:void(0)" id="hpl_open_in_a_new_tab" name="hpl_open_in_a_new_tab">Open in a new tab</a>
</p>
 
<script type="text/javascript">
$(document).ready(function() {
	$("#hpl_open_in_a_new_tab").click(function () {			
		var url = "http://4rapiddev.com";
	window.open(url,'_blank');			return false;
	});
});
</script>
</body>
</html>

Note: if we want to open that link in the current window, we can use:

1
2
3
4
5

	$("#hpl_open_in_current_window").click(function () {			
		var url = "http://4rapiddev.com";
	window.location.href = url;			return false;
	});

JavaScript Open A New Tab With JQuery is a post from: 4 Rapid Development