Rails 3.2.3 + Twitter Bootstrap + Nav-Tabs: Cách hiển thị một tab cụ thể?

Question

một câu hỏi mới về ray và bootstrap.

Tôi đang sử dụng một cái gì đó như thế này:

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

Vấn đề của tôi là tôi làm 'địa chỉ' trong đó bao gồm một biểu mẫu. Bằng cách gửi biểu mẫu này, tôi kết thúc bằng một bộ điều khiển khác. Sau khi lưu địa chỉ mới với bộ điều khiển này, tôi muốn chuyển hướng đến trang này và hiển thị tab địa chỉ.

Lệnh chuyển hướng tôi đã thử là: redirect_to salon_path (@ salon.id.to_s + "# tab9") Kết quả này gọi url .../salons/1% 23tab9. Những gì tôi nghĩ tôi cần .../tiệm/1 # tab9.

Nhưng có thể bạn đang có giải pháp tốt hơn về cách chọn một tab cụ thể.

Sử dụng:

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

Answer 1

tôi có thể hình dung nó ra bản thân mình, bài này ở đây mang lại cho tôi vào đi đúng hướng: 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> 

Và trong ví dụ của tôi, tôi gọi nó như thế này:

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

Answer 2

Để tham khảo trong tương lai và cho người dùng có vấn đề tương tự, tôi sẽ thêm một tính năng nữa vào phản hồi của Marcus. Các giải pháp chính nó là hoàn hảo và hoạt động như một nét duyên dáng nhưng những gì sẽ xảy ra nếu không có thông số tab được thông qua? Sau đó, bootstrap không hiển thị bất kỳ nội dung tab nào và chỉ các tab được hiển thị. Đối với tôi, điều này trông khá xấu xí và không chuyên nghiệp. Trong trường hợp của tôi, tôi đã thêm jQuery sau đây để sửa nó.

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

Thay vì hiển thị không có gì nếu tham số không được thông qua, các mã kiểm tra tất cả các yếu tố li để xem nếu có đã hoạt động. Nếu không có thẻ nào, nó sẽ làm cho tab và tab tab đầu tiên hoạt động.

Mặc dù làm cho tab đầu tiên hoạt động có thể không hữu ích cho tất cả mọi người, mã ở trên có thể dễ dàng được sửa đổi để làm cho tab cụ thể hoạt động nếu không có thông số nào được chuyển.

Answer 3

Bạn chỉ cần phải làm data-toggle="tab" cho mỗi neo danh mục và class="tab-pane" cho mỗi 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>