बूटस्ट्रैप सक्रिय टैब एक रेल देखें

Question

मैं

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 } 

मैंने एक सक्रिय राज्य को बदलने के लिए कुछ कठिनाइयों बी एस टैब हो रही लिया है BS guide का पालन करने का प्रयास किया लेकिन इसे काम पर नहीं लाया जा सकता है। मैंने data-toggledata-target के साथ स्वैपिंग करने का प्रयास किया है। मैंने पूरी तरह से data-toggle हटा दिया है। सबसे अच्छा मैंने इसे करने के लिए प्राप्त किया है जब मैं एक और टैब पर होवर करता हूं तो छाया दिखाता है; हालांकि, यह सक्रिय रूप से पहला टैब दिखाना जारी रखता है।

Answer 1

बाहर कर देता है यह प्रतिपादन किया गया था:

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

Answer 2

आपके द्वारा लिंक किए गए मार्गदर्शिका का अनुभाग केवल आपको दिखाता है कि जब आप किसी टैब पर क्लिक करते हैं तो सामग्री को कैसे बदला जाए। टैब को स्वयं ठीक से खींचने के लिए, जब भी आप टैब स्विच करते हैं, तो आपको नए टैब पर active कक्षा सेट करने और इसे लंबे समय तक सक्रिय टैब से हटाने की आवश्यकता होती है। http://jsfiddle.net/killerbytes/syrywhkn/

Answer 3

अपने <a>

को data-toggle="tab" जोड़ सकते हैं और नमूना यहाँ $('#tabs').click को $('#tabs a').click

काम कर बदलें:

आप कुछ इस तरह की कोशिश कर सकते वही आंशिक दृश्य प्रस्तुत करने के लिए AJAX का उपयोग करके हल किया गया।

ठीक:

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