Bootstrap rotaie per tabs Togglable

Desidero utilizzare lo Togglable Tabs da Bootstrap di Twitter su un'app Rails, ma non riesco a farlo funzionare.Bootstrap rotaie per tabs Togglable

Ecco il mio app/views/pages/home.html.erb:

<ul class="nav nav-tabs" id="dashboard_products"> 
    <li class="active"><a href="#owned_products"> 1 </a></li> 
    <li><a href="#borrowed_products"> 2 </a></li> 
    <li><a href="#given_products" > 3 </a></li> 
    <li><a href="#requested_products"> 4 </a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="owned_products"> 1 </div> 
    <div class="tab-pane" id="borrowed_products" > 2 </div> 
    <div class="tab-pane" id="given_products" > 3 </div> 
    <div class="tab-pane" id="requested_products" > 4 </div> 
</div>

E qui è la mia app/beni/javascript/pages.js.coffee:

$ -> 
    $('#dashboard_products a').click = (e) -> 
    e.preventDefault() 
    $(this).tab('show')

E qui il mio app/attività/javascript/application.js

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require turbolinks 
//= require_tree .

Dove ho fallito?

fonte

2013-06-13 Flo Rahl

Hai incluso javascript bootstrap nelle tue risorse? – Parandroid

Ti manca il tag data-toggle.

Ecco un esempio:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8 well"> 
      <ul class="nav nav-tabs"> 
       <li class="active"> <a href="#home" data-target="#home" data-toggle="tab">Home</a> 

       </li> 
       <li><a href="#profile" data-target="#profile" data-toggle="tab">Profile</a> 

       </li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active fade in" id="home">home tab content</div> 
       <div class="tab-pane" id="profile">profile tab content</div> 
      </div> 
     </div> 
    </div> 
</div>

DEMO

fonte

2013-06-13 20:27:01

OK, funziona! Ma perché la guida al bootstrap di Twitter sulle [schede] (http://twitter.github.io/bootstrap/javascript.html#tabs) non mostra la scheda 'data-toggle =" "nel paragrafo dei metodi? –

Controllare se è stato incluso bootstrap js ... e anche controllare di includere il file di script caffè dopo aver incluso bootstrap js. e la sceneggiatura del caffè include anche il tuo html. come dom deve creare l'elemento prima delle schede di init ..

fonte

2013-06-13 18:22:20 ravisuhag

Ho aggiunto alcune informazioni nella mia domanda. È tutto in ordine? –

L'esempio qui

http://getbootstrap.com/javascript/#tabs

non ha un attributo data-bersaglio.

<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-target="home">Home</a></li>

Ma quando lo aggiungo

<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

Tutto ha funzionato.

fonte

2016-04-28 15:27:12 Swards

Bootstrap rotaie per tabs Togglable

risposta

Problemi correlati