web-dev-qa-db-fra.com

Comment ouvrir un onglet avec des onglets jQuery UI à partir d'un lien situé en dehors de la div?

Cela peut être un peu difficile à expliquer, mais je vais faire de mon mieux. J'ai une page de produit avec deux onglets, une description complète et une vidéo. Celles-ci sont effectuées à l'aide des onglets de l'interface utilisateur jQuery.

Au-dessus de cette section de la page, j'ai une image du produit avec des vignettes ... mais je souhaite qu'une des vignettes soit un lien permettant de voir la vidéo (qui est bien sûr contenue dans l'onglet vidéo).

Si je charge la page en tant que site.com/product#video, il charge l'onglet correct ... mais lorsque l'onglet n'est pas actif, et que j'utilise un lien en dehors de la div #tab, (ex: Video), il ne fait rien.

Comment puis-je obtenir un lien pour ouvrir l'onglet si ce n'est pas contenu dans la div #tab?

CODE

Ce code est en dehors des onglets et doit ouvrir l'onglet #video

<a href="#video">Open Video Tab</a>

Onglets Code

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="product-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover"><a href="#description">Full Description</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#video">Video</a></li>
</ul>
<div class="product-collateral">
    <div class="box-collateral box-description">
        <div id="description" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
           Content
        </div>
        <div id="video" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
            <h2 class="video">Video Content</h2>
        </div>
    </div>
</div>
</div>
jquery-uijquery-ui-tabs
12
callmedpit

Ce qui a fonctionné pour moi a été ceci:

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);
    });
});

Ainsi, cela fournit un lien vers les onglets Description et Vidéo, qui sont sélectionnés lorsque vous cliquez sur le lien.

À partir de ici , nous pouvons voir que lors de la sélection d’un onglet particulier, nous pouvons utiliser un index de base zéro ou le fragment href qui pointe vers l’onglet que nous souhaitons afficher.

C'est pourquoi les attributs href des éléments a correspondent aux identifiants des éléments div - lorsqu'on clique dessus, son fragment href est ensuite utilisé pour définir l'onglet sélectionné.

Mise à jour pour l'interface utilisateur jQuery 1.11

Comme l'interface utilisateur de jQuery a évolué, l'API lui a également permis de configurer l'onglet actif. A partir de jQuery UI 1.11, le code suivant sélectionnera l'onglet actif:

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

Maintenant, parce que nous devons maintenant fournir un index de base zéro, le code que j'ai initialement fourni ne fonctionnera plus.

Ce dont nous avons besoin maintenant, c'est d'un index qui puisse être utilisé. Une approche est:

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

Une autre consiste à utiliser les attributs HTML5 data-:

<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>

Donc, vous pouvez le faire en manipulant le clic de ces liens:

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

utilisez jQuery:

$( "#tabs" ).tabs({ active: tabNumber });

Rappelez-vous que l'indexation commence à 0

9
chuckfinley

À l'aide de jQuery, liez un événement de clic à votre lien qui ouvre l'onglet souhaité.

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

J'utilise un mini plug-in.

    (function($) {
    $.fn.tabremote = function(options) {

          var settings = $.extend({
           panel: "#tabs",
           to: "data-to",
        }, options );

        $this=$(this);
        $panel=$(settings.panel);

    $this.click(function(){
                if($(this).attr("href"))
                    {var tos=$(this).attr("href");}
                else
                    {var tos=$(this).attr(settings.to);}

                to=tos.match(/\d/g);
    $panel.tabs({active: to-1});        
    return false;   
    });


        return this;
    }
})(jQuery);

Ouvre l'onglet en utilisant href ou n'importe quel élément.

le panneau id doit contenir le numéro du panneau. Exemple (1-onglets, onglets-2, ...) Le plugin soustrait 1 et ouvre le panneau. Onglets (actif, (nombre d'identifiant -1))

Utilisation

$("button.href").tabremote({panel:"#tabs",to:"data-href"});

panel: "# tabs" // panel de conteneurs

to: "data-href" // nom d'attribut avec valeur

0
Jirkaz

Si vous utilisez Twitter bootstrap au lieu de jquery ui, ce sera très simple. Ajoutez simplement data-toggle="tab" et mettez le lien où vous voulez dans la page:

 <a href="#video" data-toggle="tab">Open Video Tab</a>
0
Shadi Namrouti
function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}
0
Pedro Soares