Rails 3.2.3 + Twitter Bootstrap + Nav-Tabs: Wie zeigt man einen bestimmten Tab an?

Question

eine weitere Newbie-Frage zu Schienen und Bootstrap.

ich so etwas wie dieses bin mit:

<div class="tabbable tabs-left"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">About us</a></li> 
      <li><a href="#tab9" data-toggle="tab">Address</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <%= render 'about_us' %> 
    </div> 
    <div class="tab-pane" id="tab9"> 
     <%= render 'address' %> 
    </div> 
</div> 

Mein Problem ist, dass ich 'Adresse' machen, die ein Formular enthält. Mit dem Absenden dieses Formulars komme ich zu einem anderen Controller. Nach dem Speichern einer neuen Adresse mit diesem Controller möchte ich auf diese Seite umleiten und die Adress-Registerkarte anzeigen.

Der Redirect-Befehl, den ich ausprobiert habe, war: redirect_to salon_path (@ salon.id.to_s + "# tab9") Dies führt zum Aufruf der URL .../salons/1% 23tab9. Was ich denke ich brauche es .../salons/1 # tab9.

Aber vielleicht haben Sie eine bessere Lösung, wie Sie eine bestimmte Registerkarte auswählen.

Verwendung:

gem 'rails', '3.2.3' 
gem 'bootstrap-sass', '2.0.3'. 

Answer 1

ich es selbst Zahl könnte heraus, dieser Beitrag hier brachte mich auf dem richtigen Weg: How to get Twitter-Bootstrap navigation to show active link?

<div class="tabbable tabs-left"> 
<ul class="nav nav-tabs"> 
    <li class="<%= 'active' if params[:tab] == 'tab1' %>"><a href="#tab1" data-toggle="tab">About us</a></li> 
    <li class="<%= 'active' if params[:tab] == 'tab9' %>"> <a href="#tab9" data-toggle="tab">Address</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="<%= if (params[:tab] == 'tab1' || !params[:tab])then 'tab-pane active' else 'tab-pane' end%>" id="tab1"> 
     <%= render 'about_us' %> 
    </div> 
    <div class="<%= if params[:tab] == 'tab9' then 'tab-pane active' else 'tab-pane' end%>" id="tab9"> 
     <%= render 'address' %> 
    </div> 
</div> 

Und in meinem Beispiel nenne ich es wie dies:

redirect_to salon_path(@salon.id, tab:"tab9") 

Answer 2

Für zukünftige Referenz und für Benutzer mit ähnlichen Problemen, würde ich eine weitere Funktion zu Marcus Antwort hinzufügen. Die Lösung selbst ist perfekt und funktioniert wie ein Zauber, aber was passiert, wenn kein Tab-Parameter übergeben wird? Dann zeigt Bootstrap keinen Tab-Inhalt und nur die Tabs werden angezeigt. Das sieht für mich eher hässlich und unprofessionell aus. In meinem Fall habe ich die folgende jQuery hinzugefügt, um es zu beheben.

$(document).ready(function() { 

//The following set of code checks to see if any tab is already active (this occurs if a parameter to tab would be passed) 
//If no tab is active, make the first tab and tab-pane active 
var elementAlreadyActive = false; 
$('.nav-tabs li').each(function(index, li) { 
    var element = $(li); 
    if (element.attr("class") == "active"){ 
      elementAlreadyActive = true; 
    } 

}); 
if (!elementAlreadyActive){ 
    $('.nav-tabs li:first').addClass('active'); 
    $('.tab-content div:first').addClass('active'); 
} }); 

Stattdessen nichts zu zeigen, wenn der Parameter nicht übergeben wird, überprüft der Code alle li-Elemente zu sehen, ob bereits aktiv sind. Wenn keiner von ihnen ist, wird der erste Tab und Tab-Bereich aktiv.

Obwohl das erste Register aktiv zu machen, um alle nicht nützlich sein kann, kann der Code über leicht sind eine spezielle Registerkarte aktiv, wenn keine Parameter übergeben, um geändert werden.

Answer 3

Sie müssen nur data-toggle="tab" für jedes Listenelement Anker tun und die class="tab-pane" für jeden Reiter

<div class="tabbable"> 
<ul class="nav nav-tabs" id="proftabs"> 
    <li><a href="#profile_tab" data-toggle="tab" >Profile</a></li> 
    <li><a href="#friends_tab" data-toggle="tab">Friends</a></li> 
    <li><a href="#photos_tab" data-toggle="tab">Photos</a></li> 
    <li><a href="#videos_tab" data-toggle="tab">Videos</a></li> 
    <li><a href="#quotes_tab" data-toggle="tab">Quotes</a></li> 

<div class="tab-content"> 
     <div id="profile_tab" class="tab-pane"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid excepturi id, maxime nesciunt recusandae repellat unde veritatis! Eveniet, fugiat, ipsum. Architecto assumenda, culpa impedit molestias natus porro quisquam repudiandae sunt! 
     </div> 
    <div id="friends_tab" class="tab-pane"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis cupiditate incidunt. Accusantium adipisci architecto dignissimos eligendi est explicabo ipsa molestiae nesciunt optio porro provident, sint soluta, tempore temporibus vitae? 
    </div> 
    <div id="photos_tab" class="tab-pane"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ex harum iste magnam necessitatibus sed sit. A adipisci amet cupiditate delectus dolor itaque numquam officia omnis, provident quod temporibus voluptatibus? 
    </div> 
    <div id="videos_tab" class="tab-pane"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto at autem dolore, dolorum eaque earum eius, id in iste molestias officia, possimus qui quis recusandae repellat reprehenderit suscipit voluptatum! 
    </div> 
    <div id="quotes_tab" class="tab-pane"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur, in necessitatibus qui quidem tenetur unde voluptatum! Aspernatur dolorem earum id labore molestiae nam quas quisquam, sapiente sequi ut voluptatibus. 
    </div> 
    </div> 
</div>