Utilisation des onglets de l'interface utilisateur jQuery. Comment associer un onglet à une URL plutôt que de charger un onglet?

Question

J'utilise les onglets de l'interface utilisateur de jQuery pour créer une section d'onglet verticale d'une page et je souhaite que le dernier onglet vertical soit lié à une URL plutôt que de charger un onglet.

Des suggestions pour la meilleure façon de faire cela? Je peux coller un autre élément en plus d'un LI dans la liste, mais je préférerais que le dernier li se comporte différemment.

Merci pour toute aide.

Voici mon javascript:

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

Et 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

Après votre .tabs() appel, vous pouvez inverser le comportement de clic et href il a changé, en mettant l'href en arrière comme ceci:

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

You can give it a try here.

Mise à jour: En utilisant les nouvelles versions de jQuery:

Il n'y a pas besoin d'ajouter un gestionnaire de clic une fois que vous déliez le gestionnaire de clic jQuery-UI à partir du lien que vous souhaitez modifier. Cela fonctionne:

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

Answer 2

Vous pouvez modifier la méthode de sélection des onglets:

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

et comparer ui.tab.id (ou ui.panel.id, basé sur le balisage que vous utilisez) à l'id du onglet que vous souhaitez envoyer et utilisez location.href=... pour rediriger l'utilisateur.