2013-01-24 6 views
41

sto usando jQuery 1.9 e jQuery UI 1.10Ottenere l'ID della scheda (div) in fase di attivazione

voglio essere in grado di ottenere la scheda ID quando si fa clic su una scheda. Ad esempio, se ho fatto clic sulla scheda denominata "Second", desidero ottenere la risposta "tabs-2".

ho fatto il codice qui sotto finora:

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({ 
      beforeActivate: function (event, ui) { 
       alert(/* the id of the tab (div) being activated */); 
      } 
     }); 
    }); 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First</a></li> 
     <li><a href="#tabs-2">Second</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>abcde</p> 
    </div> 
    <div id="tabs-2"> 
     <p>fghi</p> 
    </div> 
</div> 
+1

tempo di aggiornare la risposta scelta credo :) –

risposta

54

Testato e funzionante con jQueryUI 1.10, come ottenere l'ID della scheda come è selezionata:

$("#tabs").tabs({ 
    beforeActivate: function (event, ui) { 
    alert(ui.newPanel.attr('id')); 
    } 
}); 
+3

'alert (ui.newTab. context.innerText) 'per visualizzare la scheda cliccata sul testo –

+1

aggiornata la risposta corretta perché penso che questa sia una soluzione migliore. Grazie Lamah – AlvaroV

+0

solo per sapere ... è sbagliato usare il modo in cui @AdrienBe suggerisce? –

22
var $tabs = $("#tabs").tabs({ 
    select: function(evt, ui) { 
     $("#current").text($(ui.tab).attr('href')); 
    } 
}) 

UPDATE - Un'altra soluzione per jQuery UI 1,10

$(function() { $('#tabs').tabs({ 
      activate: function (event, ui) { 
      var active = $("#tabs").tabs("option", "active"); 
      alert($("#tabs ul>li a").eq(active).attr('href')); 
    } 
}); 

Updated jsFiddle Demo

+0

Il codice fornito non è completamente compatibile con jquery ui 1.10. In ogni caso voglio ottenere i dati facendo clic sulla scheda, non su un altro pulsante sulla pagina. grazie comunque – AlvaroV

+0

@ user1714198 - Vedi la risposta aggiornata per favore. – MuhammadHani

+0

"Demo jsFiddle aggiornato" mostra la stessa demo, le schede e un pulsante esterno che mostra l'ID della scheda selezionata. Come ho detto, voglio ottenere l'ID facendo clic sulla scheda, non su un altro pulsante sulla pagina. – AlvaroV

2

Se si desidera ottenere qualcosa quando si fa clic sulla scheda, utilizzare la s eleggere evento.

$('#tabs').tabs({ 
    beforeActivate: function(event, ui){ 
    alert($(ui.tab).attr('href')); 
} 
}); 

EDIT

Modificato 'selezionare' a 'beforeActivate' come è stato rimosso dalla versione 1.10

+1

grazie ma select event è stato rimosso in jquery ui 1.10 http://jqueryui.com/upgrade-guide/1.10/#removed-select-event-use-beforeactivate – AlvaroV

+0

grazie amico .. Ma se volevi sapere come ottenere il href , spero "$ (ui.tab) .attr ('href')" ti avrebbe aiutato. –

+0

dovrebbe essere: $ (ui.newTab) .attr ('href') -> http://api.jqueryui.com/tabs/#event-beforeActivate in ogni caso, non restituisce nulla – AlvaroV

0

Utilizzare aria-controlli

alert(ui.newTab.attr("aria-controls")); 
1

Sto supponendo che tu voglia sapere quale scheda viene attivata e in base a quella esegui varie azioni.

Invece di ids prendendo e attributi dagli elementi HTML, ecco come si fa:

$("#tabs").on("tabsactivate", (event, ui) => { 
    if (ui.newPanel.is("#tabs-1")){ 
     //first tab activated 
    } 
    else{ 
     //second tab activated 
    } 
}); 

L'evento activate non è sempre chiamato quando le schede vengono creati. Per questo è necessario aggiungere l'evento "tabscreate" nel mix, ma si ottiene l'idea.

1

Esaminare l'oggetto evento JQueryUI (utilizzare un debugger del browser come gli strumenti per sviluppatori Firebug o Chrome di Mozilla).

$("#tabs").tabs({   
    activate: function(event, ui) { 
     console.log(event) //unnecessary, but it's how to look at the event object    
     alert(event.currentTarget.hash) 
    } 
}); 
3

questo funziona per me

$("#editor_tabs").tabs({ 
    activate: function (event, ui) { 
     $(ui.newTab.find("a").attr("href")).html("Got It"); 
    } 
}); 
+0

Io uso un metodo simile per fare vari "sapori" di Tabs .... aggiungendo una classe o un altro attributo, posso avere qualche comportamento specifico abilitato all'attivazione. –

1
var id=$("ulselector li.ui-state-active").attr("aria-controls")); 
alert(id); 
0

A mio parere, il modo più semplice è quello di aggiungere data- al <li ...> che compongono le schede.

Ad esempio:

   <li data-index="2" data-tabname="Notes"> 
        <a href="#tabs-Employee-Notes">Notes</a> 
       </li> 

quindi gestire l'evento beforeActivate (se questo è l'evento che si sta guardando):

$("#jqTabs_EmployeeDetails").tabs({ 
    heightStyle: "fill", 
    beforeActivate: function (event, ui) { 
     var n = ui.newTab; 

     console.log($(n).data()); 
    } 
}); 

Per esempio, $(n).data("tabname") restituirà il nome della scheda. Ciò consente inoltre di aggiungere qualsiasi altra informazione necessaria alle schede. Soluzione semplicistica e scalabile credo.

0

funziona per me

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id'); 
+0

Aggiungi qualche spiegazione alla tua risposta per favore. –

0

Il modo easyest che ho trovato è:

$('#tabs .ui-state-active').attr('aria-controls') 

Ciò restituirà l'ID dalla strega div è attivo. Ricorda che devi cambiare # tasselli con il tuo ID jquery.tabs.