Javascript Rails视图中的引导活动选项卡

我在将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 }

---

我已经试着按照这条路线走了，但没能成功。我已尝试将

数据切换

与

数据目标

交换。我已完全删除

数据切换

。我能做的最好的事情就是当我在另一个标签上悬停时显示阴影；但是，它会继续显示第一个选项卡处于活动状态。

您链接的指南部分仅显示如何在单击选项卡时更改内容。为了使选项卡本身正确绘制，每当切换选项卡时，都需要在新选项卡上设置

活动

类，并将其从不再活动的选项卡中删除

您可以尝试以下方法：

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

---

将

data toggle=“tab”

添加到您的

中，结果显示它正在渲染相同的部分。使用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()

已尝试此操作，选项卡现在可以工作，但
。选项卡内容
将不会呈现。好像我不能既吃蛋糕又吃蛋糕。你解决了吗？@amitben没有。我甚至试过用波旁威士忌和jQuery用户界面。当我在选项卡中迭代表时，活动状态似乎中断了。