title: Bootstrap Active Tab in a Rails View
body: <p><img src="https://i.stack.imgur.com/5OxSS.gif" alt="Tab Will Not Change Active State"></p>
  
  <p>I've had some difficulties getting the BS tabs to change to an active state</p>
  
  <p>index.html.haml</p>
  
  <pre><code>- if @tabs
  %ul#tabs.nav.nav-tabs{:role =&gt; "tablist"}
    %li.active{:role =&gt; "presentation"}
      = link_to "All", search_jobs_path(tab: "ALL"), {"aria-controls" =&gt; "home", :role =&gt; "tab"}
    - @tabs.each do |tab|
      %li{:role =&gt; "presentation"}
        = link_to tab, search_jobs_path(tab: tab), {"aria-controls" =&gt; "home", :role =&gt; "tab"}
    :javascript
      $('#tabs').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
      })
  .tab-content
  = render partial: 'jobs/list', locals: { jobs: @jobs }
  </code></pre>
  
  <p>I've tried following the <a href="http://getbootstrap.com/javascript/#tabs-usage" rel="nofollow noreferrer">BS guide</a> but can't get it to work. I've tried swapping out <code>data-toggle</code> with <code>data-target</code>. I've removed <code>data-toggle</code> 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.</p>