Bootstrap tích cực Tab trong một Rails Xem

Question

Tôi đã có một số khó khăn nhận được các tab BS để thay đổi trạng thái hoạt động

index.html.haml

- if @tabs 
%ul#tabs.nav.nav-tabs{:role => "tablist"} 
    %li.active{:role => "presentation"} 
    = link_to "All", search_jobs_path(tab: "ALL"), {"aria-controls" => "home", :role => "tab"} 
    - @tabs.each do |tab| 
    %li{:role => "presentation"} 
     = link_to tab, search_jobs_path(tab: tab), {"aria-controls" => "home", :role => "tab"} 
    :javascript 
    $('#tabs').click(function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
.tab-content 
= render partial: 'jobs/list', locals: { jobs: @jobs } 

Tôi đã đã thử theo số BS guide nhưng không thể làm cho nó hoạt động. Tôi đã thử trao đổi số data-toggle với data-target. Tôi đã xóa hoàn toàn data-toggle. Điều tốt nhất tôi đã làm là hiển thị bóng khi tôi di chuột qua một tab khác; tuy nhiên, nó vẫn tiếp tục hiển thị tab đầu tiên là hoạt động.

Answer 1

Hóa ra nó đã được render cùng một phần. Sử dụng ajax để hiển thị chế độ xem đã giải quyết vấn đề này.

Việc sửa chữa:

index.html.haml:

%ul.accordion-tabs 
%li.tab-header-and-content 
    %a.tab-link.is-active{:href => "/jobs/search?tab=ALL"} All 
    .tab-content{:data => { :url => "/jobs/search?tab=ALL&inline=true" }} 
    = render partial: 'jobs/list', locals: { jobs: @jobs } 
    .loading{style: 'display:none;'} 
     = image_tag "spinner.gif" 
     %p Loading 
- @tabs.each do |tab| 
    %li.tab-header-and-content 
    %a.tab-link{:href => "/jobs/search?tab=#{tab}"} #{tab.capitalize} 
    .tab-content{:data => { :url => "/jobs/search?tab=#{tab}&inline=true" }} 
     .loading 
     = image_tag "spinner.gif" 
     %p Loading 

jobs_controller.rb:

if params[:inline] 
    render partial: 'jobs/list', locals: { jobs: @jobs }, layout: false 
else 
    render :index 
end 

jobs.js.coffee:

$(document).on 'page:change', -> 
    $('.accordion-tabs').each (index) -> 
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show() 
    $('.accordion-tabs').on 'click', 'li > a.tab-link', (event) -> 
    accordionTabs = undefined 
    nextTab = undefined 
    if !$(this).hasClass('is-active') 
     event.preventDefault() 
     accordionTabs = $(this).closest('.accordion-tabs') 
     accordionTabs.find('.is-open').removeClass('is-open').hide() 
     nextTab = $(this).next() 
     nextTab.toggleClass('is-open').toggle() 
     accordionTabs.find('.is-active').removeClass 'is-active' 
     $(this).addClass 'is-active' 
     nextTab.find('.loading').show() 
     nextTab.find('.loading p').text 'Loading' 
     $.ajax 
     url: nextTab.data('url') 
     success: (data) -> 
      nextTab.html data 
      nextTab.find('.loading').hide() 
     error: -> 
      nextTab.find('.loading p').text 'Error' 
    else 
     event.preventDefault() 

Answer 2

Phần của hướng dẫn bạn đã liên kết chỉ cho bạn biết cách thay đổi nội dung khi bạn nhấp vào tab. Để các tab tự vẽ chính xác, bất cứ khi nào bạn chuyển tab, bạn cần đặt lớp active trên tab mới và xóa nó khỏi tab không còn hoạt động.

Bạn có thể thử một cái gì đó như thế này:

$('#tabs').click(function (e) { 
    e.preventDefault() 
    $("#tabs li").removeClass('active') 
    $(this).parent().addClass('active') 
    $(this).tab('show') 
}) 

Answer 3

thêm data-toggle="tab" để bạn <a>

và thay đổi mẫu $('#tabs').click-$('#tabs a').click

làm việc ở đây: http://jsfiddle.net/killerbytes/syrywhkn/