title: Getting Twitter Bootstrap's "Tabs" Javascript to Work on Rails App
body: <p>A javascript problem on a rails app.</p>
  
  <p>Twitter docs keep things very straightforward, however I'm still unable to get tabs to work dynamically (tab switching and dropdown).  I straight up copied their source code and downloaded their javascript and included that in my application.js file on my rails app.  Not sure what I'm missing.</p>
  
  <p>The HTML file:</p>
  
  <pre><code>&lt;script&gt;
    $(function () {
      $('#.tabs').bind('change', function (e) {
        e.target // activated tab
        e.relatedTarget // previous tab
      })
  &lt;/script&gt;
  &lt;h3&gt;Demo&lt;/h3&gt;
  &lt;ul class="tabs" data-tabs="tabs"&gt;
  &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;
  &lt;li class="dropdown" data-dropdown="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a href="#fat"&gt;@fat&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#mdo"&gt;@mdo&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="my-tab-content" class="tab-content"&gt;
    &lt;div class="active tab-pane" id="home"&gt;
      &lt;p&gt;Lorem Ipsum.&lt;/p&gt;
  </code></pre>
  
  <p>The Application.js file:</p>
  
  <pre><code>// Place your application-specific JavaScript functions and classes here
  // This file is automatically included by javascript_include_tag :defaults
  $(document).ready(function(){
  
  !function( $ ){
  
    "use strict"
  
    function activate ( element, container ) {
      container
        .find('&gt; .active')
        .removeClass('active')
        .find('&gt; .dropdown-menu &gt; .active')
        .removeClass('active')
  
      element.addClass('active')
  
      if ( element.parent('.dropdown-menu') ) {
        element.closest('li.dropdown').addClass('active')
      }
    }
  
    function tab( e ) {
      var $this = $(this)
        , $ul = $this.closest('ul:not(.dropdown-menu)')
        , href = $this.attr('href')
        , previous
        , $href
  
      if ( /^#\w+/.test(href) ) {
        e.preventDefault()
  
        if ( $this.parent('li').hasClass('active') ) {
          return
        }
  
        previous = $ul.find('.active a').last()[0]
        $href = $(href)
  
        activate($this.parent('li'), $ul)
        activate($href, $href.parent())
  
        $this.trigger({
          type: 'change'
        , relatedTarget: previous
        })
      }
    }
  
  
   /* TABS/PILLS PLUGIN DEFINITION
    * ============================ */
  
    $.fn.tabs = $.fn.pills = function ( selector ) {
      return this.each(function () {
        $(this).delegate(selector || '.tabs li &gt; a, .pills &gt; li &gt; a', 'click', tab)
      })
    }
  
    $(document).ready(function () {
      $('body').tabs('ul[data-tabs] li &gt; a, ul[data-pills] &gt; li &gt; a')
    })
  
  }( window.jQuery || window.ender );
  
  });
  </code></pre>