Usando jQuery UI Tabs. ¿Cómo puedo hacer que una de las pestañas se vincule a una URL en lugar de cargar un panel de pestañas?

Question

Estoy usando las pestañas jQuery UI para crear una sección de pestaña vertical de una página, y quiero que la última pestaña vertical se vincule a una URL en lugar de cargar un panel de pestañas.

¿Alguna sugerencia para la mejor manera de hacerlo? Puedo incluir otro elemento además de un LI en la lista, pero prefiero que el último li se comporte de manera diferente.

Gracias por cualquier ayuda.

Aquí es mi javascript:

// vtabs 
    $("#aboutprod-tabs").tabs(
    { fx: [{opacity:'toggle', duration:'normal'}, 
    {opacity:'toggle', duration:'fast'}] }) 
    .addClass('ui-tabs-vertical'); 

y HTML

<div id="aboutprod-tabs"> 
    <ul> 
    <li><a href="#tabs-1">First</a></li> 
    <li><a href="#tabs-2">Second</a></li> 
    <li><a href="#tabs-3">3rd</a></li> 
    <li class="last"><a href="/products">Learn more...</a></li> 
    </ul> 
    <div id="tabs-1"> 
    Tab panel 1 
    </div> 
    <div id="tabs-2"> 
    Tab panel 2 
    </div> 
    <div id="tabs-3"> 
    Tab panel 3 
    </div> 
</div> 

Answer 1

Después de su .tabs() llamada que puede invertir el comportamiento de la pulsación y href cambió, poniendo el href espalda como esta:

$("li.last a").unbind('click').click(function() { 
    this.href = $.data(this, 'href.tabs');​​​​ 
}); 

You can give it a try here.

Actualizar: El uso de las nuevas versiones de jQuery:

no hay necesidad de añadir un controlador de clic una vez que se desvincula controlador de clic de jQuery-UI desde el enlace que desea cambiar. Esto funcionará:

$("li.last a").unbind('click'); 

Answer 2

Puede cambiar el método de selección de las fichas:

$(".selector").tabs({ select: function(event, ui) { ... } });

y compara ui.tab.id (o ui.panel.id, basado en el margen de beneficio que está utilizando) para la identificación de la pestaña que desea enviar y use location.href=... para redirigir al usuario.