jQuery UI tab - combination of tabs and onselect to go to URL

Question

How do I modify my javascript and HTML so that the first tab works as normal and the second tab directs my window to a completely new page?

I found this: http://snipplr.com/view/9513/, but could not figure out how to implement it.

My Script:

<script type="text/javascript">
$(document).ready(function(){

$('#tabs').tabs();      

    if($("#tabs") && document.location.hash){
        $.scrollTo("#tabs");
    }
    $("#tabs ul").localScroll({ 
        target:"#tabs",
        duration:0,
            hash:true
    });

    $('#tabs-min').tabs();

}); 

My HTML

<div id="tabs"><ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="URL HERE" class="leave">Tab 2</a></li></ul>

  <div id="tab1">tab1 content</div>
</div>

Answer 1

I've got a fiddle up and running here. It doesn't totally work and I'm guessing it's because running a fiddle won't let you leave the fiddle (hence window.location not actually working), but you can see how it's done. I've tested this code in my own environment and it does work.

You essentially add a class to the link you want to leave with (in my case, I've added the class leave). Then, on beforeActivate, you check if the new tab's link has the class leave and if it does, head to it's link location.

Let me know if this works for you.

<script>
$(function() {
    $( "#tabs" ).tabs({

            beforeActivate: function(event, ui) {

                if (ui.newTab.find("a").hasClass("leave")) {

                     alert("leaving...");
                     window.location = ui.newTab.find("a").attr("href");
                     return false;
                }            
        }
    });
});
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="http://www.google.com" class="leave">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        ...
    </div>
    <div id="tabs-2">
        ...
    </div>
    <div id="tabs-3">
       ....
    </div>
</div>