title: Unable to use the bootstrap togglable tabs using ruby (link_to) method
body: <p>I'm having difficulty in getting the bootstrap <a href="http://getbootstrap.com/javascript/#tabs" rel="nofollow">togglable tabs</a>  element to work using the <code>link_to</code> view helper method. This is the bootstrap code i want to implement:</p>
  
  <pre><code>&lt;div role="tabpanel"&gt;
    &lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs" role="tablist"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a href="#home" aria-controls="home" role="tab" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      &lt;div role="tabpanel" class="tab-pane active" id="home"&gt;...&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="profile"&gt;...&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="messages"&gt;...&lt;/div&gt;
      &lt;div role="tabpanel" class="tab-pane" id="settings"&gt;...&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried the following, but have not gotten a successful result:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div role="tabpanel"&gt;
   &lt;ul id="my_menu a" class="nav nav-tabs" role="tablist"&gt;
     &lt;li role="presentation" class="active"&gt;&lt;%= link_to "Main", root_path, :role =&gt; "tab", :data =&gt; {:toggle =&gt; "tab"} %&gt;&lt;/li&gt;
     &lt;li role="presentation"&gt;&lt;%= link_to "Profile", profile_path, :role =&gt; "tab", :data =&gt; {:toggle =&gt; "tab"} %&gt;&lt;/li&gt;
     &lt;li role="presentation"&gt;&lt;%= link_to "Projects", projects_path, :role =&gt; "tab", :data =&gt; {:toggle =&gt; "tab"} %&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('#my_menu a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can get the tabs to appear but nothing happens when I click on them. I hope the problem is clear enough. Thanks a lot in advance!</p>