Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JavaScript Open A New Tab With JQuery

JavaScript Open A New Tab With JQuery

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>

<!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;
	});

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

Oct 23, 2014Hoan Huynh

Source Code Demo page

CodeIgniter Get Current Controller Function/ActionCodeigniter Pagination Show Total Pages
You Might Also Like:
  • Jquery checkbox checked
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • Get Image Width Height With JQuery And JavaScript
  • JQuery Create Textbox With Count Down Limit Characters
  • FancyBox Redirect To A Predefined URL When Click On Image
  • Validate Date With JQuery And Date Object
  • JQuery Show Popup Once A Day
  • Create Pie Chart With HTML & JavaScript
  • Javascript Minify To Normal – Deminify – Uncompressed Online Tool
  • Auto Rotate Web Page Title With JavaScript
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

Link7 years ago Javascriptbutton link, JQuery294
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,451 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,829 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,646 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,984 views
C# Read Json From URL And Parse/Deserialize Json
11,710 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development