Passare alla scheda selezionata in base al nome in jQuery UI-Tabs

Se ho tre schede:Passare alla scheda selezionata in base al nome in jQuery UI-Tabs

<div id="tabs"> 
    <ul> 
     <li><a href="#sample-tab-1"><span>One</span></a></li> 
     <li><a href="#sample-tab-2"><span>Two</span></a></li> 
     <li><a href="#sample-tab-3"><span>Three</span></a></li> 
    </ul> 
</div>

Vorrei scambiare a # campione-scheda-2 per il suo nome. So che posso passare a una scheda se so che è il numero, ma nel caso in cui mi sono imbattuto non lo saprò.

Note: jQuery 1.3.1/JQuery-UI 1.6rc6

fonte

2009-02-23 Rob

modo che si desidera selezionare la scheda 'Tre' non importa dove è? Perché conosci la parola "tre" ma non l'ID o il numero? Questo approccio può essere problematico se tu traduci il tuo sito ... puoi approfondire il problema? –

Certo, quello che sto cercando di fare è descritto qui: http://stackoverflow.com/questions/572376/changing-the-hash-but-not-moving-the-page-using-jquery-ui-tabs The approccio che sto cercando ora è di cambiare l'hash per aggiungere un carattere al nome dell'hash, e poi al caricamento della pagina selezionare quella scheda (senza il carattere) – Rob

Fondamentalmente impostare il window.location in # sample-tab-1, e poi quando la pagina è caricata (index.php # sample-tab-1) passa a # _sample-tab-1 – Rob

Non ho potuto ottenere la risposta precedente per funzionare. Ho fatto quanto segue per ottenere l'indice della scheda per nome:

var index = $('#tabs a[href="#simple-tab-2"]').parent().index(); 
$('#tabs').tabs('select', index);

fonte

2011-01-10 11:04:01

Ha funzionato benissimo, grazie :) – Nick

@Rob dovresti contrassegnarlo come risposta – autonomatt

+12

Questa risposta non è più il modo "più breve" per farlo, poiché jQueryUI si è semplicemente evoluto dal 2010. se sei uno di coloro che prendono per scontata la risposta selezionata/più votata e non scorrono ad altri, ecco un bel zucchero sintattico che è stato aggiunto da: '$ (" # tabs "). tabs (" select "," #sample -tab-1 ");' –

È possibile ottenere l'indice della scheda in base al nome con il seguente script:

var index = $('#tabs ul').index($('#simple-tab-2')); 
$('#tabs ul').tabs('select', index);

fonte

2009-02-23 16:52:49 bdukes

Questo non funziona con me. La risposta di Christian George ha funzionato. Quale versione di jquery stai usando? Sto usando 1.4.3. – Nap

@Nassign sì, sembra che la mia risposta non funzioni (sta provando a selezionare il Li come se avesse l'ID 'simple-tab-2', invece di averlo come' href'). – bdukes

C'è un modo per cambiare le schede usando questo codice durante l'ancoraggio della pagina? –

Se si modificano le HREF, è puoi assegnare un id ai link <a href="#sample-tab-1" id="tab1"><span>One</span></a> in modo da poter trovare l'indice della tabulazione dal suo id.

fonte

2009-07-06 15:46:11 kiev

L'unico modo pratico per ottenere l'indice a base zero delle schede è quello di scorrere ciascuno degli elementi che rendono il tabset (il LI> A s) e corrispondono sul loro testo interno. Probabilmente può essere fatto in un modo più pulito, ma ecco come l'ho fatto.

$('#tabs ul li a').each(function(i) { 
    if (this.text == 'Two') {$('#reqTab').val(i)} 
}); 

$("#tabs").tabs({ 
    selected: $('#reqTab').val() 
});

Si può vedere che ho usato una nascosta < ingresso id = "reqTab" > campo nella pagina per assicurarsi che la variabile spostato da una funzione all'altra.

NOTA: c'è un po 'di trucchi - la selezione di schede dopo l'attivazione del tabset non sembra funzionare come pubblicizzato in jQuery UI 1.8, motivo per cui ho usato l'indice identificato dal mio primo passaggio in ordine per inizializzare il tabset con la scheda desiderata selezionata.

fonte

2010-05-01 03:31:19 Wes

La risposta di @ bduke in realtà funziona con una leggera modifica.

var index = $("#tabs>div").index($("#simple-tab-2")); 
$("#tabs").tabs("select", index);

assume Sopra qualcosa di simile a:

<div id="tabs"> 
    <ul> 
    <li><a href="#simple-tab-0">Tab 0</a></li> 
    <li><a href="#simple-tab-1">Tab 1</a></li> 
    <li><a href="#simple-tab-2">Tab 2</a></li> 
    <li><a href="#simple-tab-3">Tab 3</a></li> 
    </ul> 
    <div id="simple-tab-0"></div> 
    <div id="simple-tab-1"></div> 
    <div id="simple-tab-2"></div> 
    <div id="simple-tab-3"></div> 
</div>

jQueryUI supporta ora chiamando "selezionare" utilizzando ID/selettore HREF della scheda, ma quando la costruzione delle schede, l'opzione "selezionato" ancora supporta solo la indice numerico.

Il mio voto va a Bdukes per farmi seguire la strada giusta. Grazie!

fonte

2011-10-24 19:53:41 cautionbug

Usare questa funzione:

function uiTabs(i){ 
    $("#tabs").tabs("option", "selected", i); 
}

E l'uso seguente codice per passare tra le schede:

<a onclick="uiTabs(0)">Tab 1</a> 
<a onclick="uiTabs(1)">Tab 2</a> 
<a onclick="uiTabs(2)">Tab 3</a>

fonte

2011-12-09 15:58:12 Hamidreza

questo ha funzionato magnificamente per me, grazie! – AzurGroup

il seguente pezzo lavorato per me

$($("#tabs")[0]).tabs({selected: 1});

Speranza, questo aiuta !

fonte

2012-01-19 11:01:58 Sandeep

Ecco un codice di esempio per ottenere la scheda selezionata in base al nome.Spero che questo ti aiuta a trovare ypur soluzione:

<html> 
<head> 
<script type="text/javascript"><!-- Don't forget jquery and jquery ui .js files--></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#tabs').show(); 

    // shows the index and tab title selected 
    $('#button-id').button().click(function(){ 
     var selTab = $('#tabs .ui-tabs-selected'); 
     alert('tab-selected: '+selTab.index()+'-'+ selTab.text()); 
    }); 
    }); 
</script> 
</head> 
<body> 
    <div id="tabs"> 
     <ul id="tablist"> 
      <li><a href='forms/form1.html' title="form_1"><span>Form 1</span></a></li> 
      <li><a href='forms/form2' title="form_2"><span>Form 2</span></a></li> 
     </ul> 
    </div> 
    <button id="button-id">ClickMe</button> 
</body> 
</html>

fonte

2012-03-23 16:26:30 Vikram

Sembra che utilizzando l'id funziona così come l'indice, per esempio semplicemente facendo questo lavoro, fuori dalla scatola ...

$("#tabs").tabs("select", "#sample-tab-1");

Questo è ben documentato nella official docs:

"Selezionare una scheda, come se fosse scattato Il secondo argomento è la . indice a base zero della scheda da selezionare o il selettore id del pannello la scheda è associato (identificatore di frammento href della scheda, es hash, indica id del pannello). "

Presumo che questo è stato aggiunto dopo che questa domanda è stata posta e probabilmente dopo la maggior parte delle risposte

fonte

2012-04-08 16:17:38

Il tuo esempio dovrebbe essere semplicemente '$ (" # tabs "). Tabs (" select "," # sample-tab-1 ");', come da [nuovi documenti] (http://docs.jquery.com/UI/Tabs # metodo di selezione). – iano

@iano Hai ragione ... sembra che i documenti siano cambiati ... grazie –

Questa soluzione non funziona più, a partire da jQuery-UI 1.10.0 – JBCP

Solo questo codice funziona davvero!

$('#tabs').tabs(); 
$('#tabs').tabs('select', '#sample-tab-2');

fonte

2012-04-21 20:24:34 xmoonlight

$('#tabs').tabs('select', index);

Metodi ` 'selezionare' non è il supporto a jQuery UI 1.10.0. http://api.jqueryui.com/tabs/

io uso questo codice, e lavorare in modo corretto:

$('#tabs').tabs({ active: index });

fonte

2013-02-14 16:42:49

non può votare abbastanza! Saluti!! – Daft

Bene che hamid ha menzionato la versione di jquery ui. Peccato che abbiano recentemente modificato l'API e rimosso funzionalità di base come l'aggiunta di schede (deprecato in 1.9, estratto in 1.10). Non credo che sarò in grado di vedere oltre questo nel loro filosofare. Come vendere un'auto con un powertrain ma senza posti a sedere. – kovacsbv

provare questo: "selezionare"/scheda "attivo"

<article id="gtabs"> 
    <ul> 
     <li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li> 
     <li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li> 
     <li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li> 
    </ul>

var index = $('#gtabs a[href="#general-filter-config"]').parent().index();

// `' seleziona 'non supporta in jquery ui versione 1.10.0

$('#gtabs').tabs('select', index);

soluzione alternativa: utilizzare "attiva":

$('#gtabs').tabs({ active: index });

fonte

2014-03-26 17:24:01

ho avuto difficoltà a raggiungere una delle risposte a lavorare come erano basati sulle versioni precedenti di JQuery UI. Stiamo usando 1.11.4 (CDN Reference).

Ecco il mio violino con il codice di lavoro: http://jsfiddle.net/6b0p02um/ ho finito per splicing insieme i bit da quattro o cinque diversi thread per ottenere la mia a lavorare:

$("#tabs").tabs(); 

    //selects the tab index of the <li> relative to the div it is contained within 
    $(".btn_tab3").click(function() { 
     $("#tabs").tabs("option", "active", 2); 
    });   

    //selects the tab by id of the <li> 
    $(".btn_tab3_id").click(function() { 
     function selectTab(tabName) { 
      $("#tabs").tabs("option", "active", $(tabName + "").index()); 
     } 

     selectTab("#li_ui_id_3"); 
    });

fonte

2017-09-26 22:09:32

Passare alla scheda selezionata in base al nome in jQuery UI-Tabs

risposta

Problemi correlati