Bootstrap Active Tab w Rails Zobacz

Question

miałem pewne trudności z dostaniem zaczepy BS, aby zmienić stan aktywny

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 } 

mam próbowałem podążać za BS guide, ale nie mogę go uruchomić. Próbowałem wymieniać data-toggle z data-target. Całkowicie usunąłem data-toggle. Najlepszym, co udało mi się zrobić, jest pokazanie cienia po najechaniu na inną zakładkę; jednak nadal pokazuje pierwszą kartę jako aktywną.

Answer 1

Okazuje się, że została renderowania to samo częściowe. Użycie ajax do renderowania widoku rozwiązało to.

Rozwiązaniem:

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

Sekcja przewodnika, który połączyłeś, pokazuje, jak zmienić treść, klikając kartę. W celu prawidłowego rysowania kart, za każdym razem, gdy zmieniasz karty, musisz ustawić klasę active na nowej karcie i usunąć ją z nieaktywnej już karty.

Można spróbować czegoś takiego:

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

Answer 3

dodać data-toggle="tab" do swojego <a>

i zmiany próbki $('#tabs').click do $('#tabs a').click

pracy tutaj: http://jsfiddle.net/killerbytes/syrywhkn/