Comment puis-je ouvrir un onglet avec jQuery UI Tabs à partir d'un lien en dehors de la div?

Ce qui a fonctionné pour moi:

Html

<a href="#description" class="open-tab">Open Description Tab</a>
<a href="#video" class="open-tab">Open Video Tab</a>   

<div id="tabs">
    <ul>
        <li>
            <a href="#description">Full description</a>
        </li>
        <li>
            <a href="#video">Video content</a>
        </li>
    </ul>

    <div class="product-collateral">
        <div class="box-collateral box-description">
            <div id="description">
                Content
            </div>
            <div id="video">
                <h2 class="video">Video Content</h2>
            </div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function () {
    $('#tabs').tabs();

    $('.open-tab').click(function (event) {
        var tab = $(this).attr('href');
        $('#tabs').tabs('select', tab);
    });
});

Donc ce que cela ne fait de fournir un lien vers la description et la vidéo onglets, qui sont sélectionnés lorsque le lien est cliqué.

De ici nous pouvons voir que lors de la sélection d'un onglet en particulier, on peut utiliser un index de base zéro ou le href fragment, ce qui souligne l'onglet nous souhaitons afficher.

C'est pourquoi le href attributs de la a éléments correspondre à l'Id de la div éléments - lorsqu'un clic est effectué sur ses href fragment est ensuite utilisée pour définir l'onglet sélectionné.

---

Mise à jour de jQuery UI 1.11

Que jQuery UI a évolué, a l'API pour le réglage de l'onglet actif. Comme de jQuery UI 1.11, le code suivant sélectionner l'onglet actif:

//Selects by the zero-based index
$('#tabs').tabs("option", "active", index);

Maintenant parce que nous avons maintenant de fournir un index basé sur zéro, le code que j'ai fourni ne fonctionne plus.

Ce dont nous avons besoin maintenant est un indice qui peut effectivement être utilisé. Une approche est la suivante:

$('.open-tab').click(function (event) {
    var index = $("selector-of-clicked-tab").index();
    $('#tabs').tabs("option", "active", index);
});

Une autre est d'utiliser HTML5 data- attributs:

<a href="#description" class="open-tab" data-tab-index="0">Open Description Tab</a>
<a href="#video" class="open-tab" data-tab-index="1">Open Video Tab</a>

De sorte que vous pouvez le faire lors de la manipulation de cliquer sur ces liens:

$('.open-tab').click(function (event) {
    $('#tabs').tabs("option", "active", $(this).data("tab-index"));
});

OriginalL'auteur

À l'aide de jquery, se lier à un événement de clic sur votre lien qui ouvre l'onglet que vous voulez.

$('#tabopenlink').click(function() {
    $('#tabs').tabs({active: tabidx});
});

OriginalL'auteur

function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}

OriginalL'auteur