Open New URL from JQuery Tab

Posted on 2009-04-28
Last Modified: 2012-05-06
Ok, I'm new to Javascript and even newer to JQuery, but am trying to learn both!

I have a webpage where I have implemented JQuery ui Tabs and they are working absolutely fine, using the default function shown below.

However, I have a real need to be able to open a new URL, using one of the tabs, however, I can't see how to do this. I'm sure it's possible, I just don't know how.

I understand I can use AJAX in a tab, but this solution won't work for me, I really need to be able to set the href of a tab to a normal URL and have it open as if the user had clicked on a bog standard link, ie in the existing window, not in a new window.

If anyone can help I'd be extermely grateful!
$(document).ready(function() {

	$(function() {




Open in new window

Question by:chuckalicious
    LVL 16

    Accepted Solution

    I think the script below should work for you.  It'll open tabs that have a target="_blank" set on their <a> element in a new window.  The only catch is that you still have to precede the URL with a #.  So, for example, this would open in a new window:

    <li><a href="#" target="_blank">Google</a></li>

    whereas this would behave as usual:
    <li><a href="#tab2">Tab 2</a></li>

    <script type="text/javascript">
        select: function(event, ui) {
          if ($('target') == '_blank')
            return false;

    Open in new window

    LVL 4

    Author Comment

    Ok, close enough. Your code still opens the link in a new window, which isn't what I'm looking for, however, I changed the code to the following. It now works nicely, so thanks :)


    Open in new window


    Featured Post

    Gigs: Get Your Project Delivered by an Expert

    Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

    Join & Write a Comment

    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now