Rails 3.2.3 + Twitter Bootstrap + Nav-Tabs：特定のタブを表示するには？

Question

レールとブートストラップに関する別の初心者質問です。

私はこのようなものを使用しています：

<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> 

私の問題は、私は、フォーム「を含むアドレス」をレンダリングすることです。このフォームを提出することで、私は別のコントローラーになります。このコントローラで新しいアドレスを保存した後、このページにリダイレクトしてアドレスタブを表示したいと思います。

redirect_to salon_path（@ salon.id.to_s + "＃tab9"） この結果、url .../salons/1％23tab9が呼び出されます。私はそれが必要だと思うもの.../salons/1＃tab9。

ただし、特定のタブを1つ選択する方法が改善されている可能性があります。使用

：

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

Answer 1

を私は自分自身をそれを把握することができ、ここでこのポストは、右のトラックに私をもたらした：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> 

そして、私の例では、私のようなそれを呼び出しますこれは：

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

Answer 2

今後のリファレンスと同様の問題を抱えているユーザーのために、もう1つの機能をMarcusのレスポンスに追加します。ソリューションそのものは完璧で、魅力的ですが、タブパラメータが渡されないとどうなりますか？ブートストラップにはタブの内容は表示されず、タブのみが表示されます。私にとっては、これはむしろ醜く、プロフェッショナルではないように見えます。私の場合は、次のjQueryを追加して修正しました。

$(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'); 
} }); 

パラメータが渡されていない場合は何も表示しないで、コードはすべてのli要素をチェックして、すでにアクティブであるかどうかを確認します。それらのどれもない場合、最初のタブとタブペインがアクティブになります。

最初のタブをアクティブにすることは誰にとっても有用ではないかもしれませんが、パラメータが渡されなければ、上記のコードを簡単に変更して特定のタブをアクティブにすることができます。

Answer 3

あなたはこれが非常に悪いソリューションです

<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>