2011-12-03 2 views
9

Nelle schede di bootstrap js di Twitter devo aggiungere una classe "attiva" a un elemento li.jquery e twitter bootstrap rendono attiva la scheda non funziona

Ottengo l'hash dall'URL. Applico la classe attiva alla scheda ma non ottiene il focus.

Desidero rendere attiva la seconda scheda quando l'URL ha un determinato hash. Codice

Fonte: http://jsfiddle.net/Chumillas/dU458/#example

+0

Il tuo codice funziona per me, ma voi non ha inserito il bootstrap. – number5

+1

Vedere Gestione risorse (2), non capisco cosa intendi – Chumillas

+0

Ok, l'ho visto ora. Scusa, colpa mia. – number5

risposta

6

ho risolto, ho bisogno di impostare il div del contenuto della scheda attiva pure.

+1

Normalmente puoi usare '$ ('# mytab a'). First(). Tab ('show')'. Se risulta che devi impostare il div del tab-content' su 'active', controlla il tuo id per la tablatura. Potresti avere degli spazi nell'ID. –

-4

Perché sono u non utilizzando il metodo select invece di cambiare la classe da soli ??

controllo questo, Selecting a jQuery Tab using a parameter in the URL

+0

Non funziona per me: $ ('. Tabs'). Tabs ('select', 1); Nessun carico. – Chumillas

+3

'select' è una funzionalità delle schede dell'interfaccia utente jQuery, ma non è disponibile nelle schede di Bootstrap di Twitter. – Synchro

1

Si può fare in questo modo:

$(function (e) { 
    var parts = decodeURI(e.target).split('#'); 
    $(".tabs").tabs().select(parts[1]); 
}); 
29

Inoltre con l'ultimo bootstrap-tab.js, è possibile utilizzare la seguente chiamata per selezionare la scheda attiva.

Nav Esempio:

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> 
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> 
</ul> 

oggetto Get con il collegamento e la visualizzazione della chiamata:

$('a[href="#tab2"]').tab('show'); 

Bests, G.

fonte: Twitter Bootstrap

+0

E se si utilizzano solo gli url dell'URL per selezionare la scheda attiva, è possibile automatizzare il processo con questo codice generico: $ (documento) .ready (function() { var url_hash = window.location.hash.split (' - ') [0]; if (url_hash [0] == '#') $ (' # schede a [href = "' + url_hash + '"] 'scheda) (' show');} ); – JeromeParadis

0

Per rendere Bootstrap lavoro schede, ci sono due cose che devi fare per rendere attiva una scheda:

  1. Impostare l'elemento li per attivare (class = "attivo")
  2. Impostare l'elemento scheda div ad attivo (class = "dissolvenza in attivo")