7

another newbie-question regarding rails and bootstrap.

I am using something like this:

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

My problem is that I render 'address' which includes a form. By submitting this form I end up in an different controller. After saving a new address with this controller I would like to redirect to this page and show the address tab.

The redirect command I tried was: redirect_to salon_path(@salon.id.to_s + "#tab9") This results in calling the url .../salons/1%23tab9. What I think I need its .../salons/1#tab9.

But maybe you are having a better solution how to choose one specific tab.

Using:

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

3 に答える 3

12

I could figure it out myself, this post here brought me onto the right track: 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>

And in my example I call it like this:

redirect_to salon_path(@salon.id, tab:"tab9")
于 2012-06-19T22:24:59.810 に答える
1

今後の参考のため、および同様の問題を抱えているユーザーのために、マーカスの応答にもう1つの機能を追加します。ソリューション自体は完璧で魅力のように機能しますが、タブパラメータが渡されない場合はどうなりますか？次に、ブートストラップはタブコンテンツを表示せず、タブのみが表示されます。私にとって、これはかなり醜くて専門的ではないように見えます。私の場合、それを修正するために次の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要素をチェックして、すでにアクティブになっている要素があるかどうかを確認します。いずれもアクティブでない場合は、最初のタブとタブペインがアクティブになります。

最初のタブをアクティブにすることはすべての人にとって役立つとは限りませんが、パラメーターが渡されない場合は、上記のコードを簡単に変更して特定のタブをアクティブにすることができます。

于 2013-03-08T21:13:30.173 に答える
1

You just have to do data-toggle="tab" for each list item anchor and the class="tab-pane" for each tab

<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>
于 2013-05-31T21:18:12.157 に答える