Bootstrap Active Tab in a Rails View

Question

I've had some difficulties getting the BS tabs to change to an active state

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 }

I've tried following the BS guide but can't get it to work. I've tried swapping out data-toggle with data-target. I've removed data-toggle completely. The best I've gotten it to do is show the shadow when I hover over another tab; however, it continues to show the first tab as active.

Answer 1

The section of the guide that you've linked only shows you how to get the content to change when you click on a tab. In order to get the tabs themselves to draw properly, whenever you switch tabs, you need to set the active class on the new tab and remove it from the no-longer-active tab.

You might try something like this:

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