web-dev-qa-db-fra.com

Comment définir l'onglet actif dans jQuery Ui

Pouvez-vous s'il vous plaît laissez-moi savoir comment je peux définir l'onglet actif dans jQuery UI avec un clic de bouton sur les onglets?

J'ai un bouton comme:

<input id="action" type="submit" value="Go to Action">

et voici le code,

<script>
$(function() {
 $( "#tabs" ).tabs();
 $( "#action" ).on("click", function(){});
});

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Description</a></li>
        <li><a href="#tabs-2">Action</a></li>
        <li><a href="#tabs-3">Resources</a></li>
        <li><a href="#tabs-4">Settings</a></li>
    </ul>

<div id="tabs-1">
    <p>Description content</p>
</div>

<div id="tabs-2">
    <p>Action content</p>
</div>

<div id="tabs-3">
    <p>Resources content</p>
</div>

<div id="tabs-4">
    <p>Settings </p>
</div>

</div>
jqueryjquery-ui
42
Behseini

Dans votre fonction pour l'utilisation de l'action de clic

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

Où # est remplacé par l'index de tabulation que vous souhaitez sélectionner.

Edit: passer de sélectionné à actif, sélectionné est obsolète

75
Daniel Esponda

Solution jQuery simple - trouvez le <a> élément où href="x" et cliquez dessus:

$('a[href="#tabs-2"]').click();
19
Denys Wessels

Juste pour clarifier en détail. C’est ce qui fonctionne avec la version actuelle de jQuery Ui

$( "#tabs" ).tabs( "option", "active", # );

où # est l'index de l'onglet que vous voulez rendre actif.

19
Mike Moon

Dans votre fonction pour l'utilisation de l'action de clic

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

Où # est remplacé par l'index de tabulation que vous souhaitez sélectionner.

12
Pažout

Je sais que c'est une vieille question. Mais je pense que la façon de changer l'onglet sélectionné a légèrement changé

La manière de changer l'onglet actif est maintenant de donner à l'index actif de l'onglet. Notez que l'index commence à 0 et non 1. Pour activer l'onglet seconde, vous utiliserez l'index 1.

//this will select your first tab
$( "#tabs" ).tabs({ active: 0 });
8
Jaylen

Vous pouvez utiliser ceci:

$(document).ready(function() {
    $("#tabs").tabs();
    $('#action').click(function() {
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected + 1);
    });
});

Pensez également à modifier le type d'entrée sous la forme button au lieu de submit à moins que vous ne souhaitiez soumettre la page.

3
Java_User

HTML: Vous devez d’abord enregistrer l’index de tabulation

<input type="hidden" name="hddIndiceTab" id="hddIndiceTab" value="<?php echo filter_input(INPUT_POST, 'hddIndiceTab');?>"/>

JS

$( "#tabs" ).tabs({
    active: $('#hddIndiceTab').val(), // activate the last tab selected
    activate: function( event, ui ) {
        $('#hddIndiceTab').val($( "#tabs" ).tabs( "option", "active" )); // save the tab index in the input hidden element
    }
});
2
Cristhian Ortega

Si vous souhaitez définir l'onglet actif par ID plutôt que par index, vous pouvez également utiliser les éléments suivants:

$('#tabs').tabs({ active: $('#tabs ul').index($('#tab-101')) });
2
Carl

il suffit de déclencher un clic, c'est un travail pour moi:

$("#tabX").trigger("click");
1
Edwin Thomas

Comment vérifier que la page Web est active ou non?

Quand nous avons actif que la couleur de fond est blanche, nous n'avons pas actif que la couleur de fond est noire

$(document).ready(function () {
    var idleState = false;
    var idleTimer = null;
    $('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
        clearTimeout(idleTimer);
        if (idleState == true) { 
            $("body").css('background-color','#fff');            
        }
        idleState = false;
        idleTimer = setTimeout(function () { 
            $("body").css('background-color','#000');
            idleState = true; }, 2000);
    });
    $("body").trigger("mousemove");
});
0
Paresh Shiyal