Bootstrap Rails 视图中的活动选项卡

Question

我在将 BS 选项卡更改为活动状态时遇到了一些困难

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-toggle 换成 data-target。我已经完全删除了 data-toggle。我能做的最好的事情就是当我将鼠标悬停在另一个选项卡上时显示阴影；但是，它继续显示第一个选项卡处于活动状态。

Answer 1

您链接的指南部分仅向您展示了如何在您单击选项卡时更改内容。为了让标签本身正确绘制，每当您切换标签时，您需要在新标签上设置 active class 并将其从不再活动的标签中删除。

您可以尝试这样的操作：

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

Answer 2

将 data-toggle="tab" 添加到您的 <a>

并将$('#tabs').click更改为$('#tabs a').click

这里的工作示例：http://jsfiddle.net/killerbytes/syrywhkn/

Answer 3

原来它渲染的是同一个部分。使用 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()

Bootstrap Rails 视图中的活动选项卡

Bootstrap Active Tab in a Rails View

javascript

jquery

ruby-on-rails

twitter-bootstrap

haml