title: Bootstrap Nav-tab show hide content
body: <p>In the app that I am building to learn Rails and JS, I want to use tab-navigation.  </p>
  
  <p>This is my tab-navigation pointing to 3 sections. I am now looking to create the JavaScript. How to I approach this when clicking the tabs and set class active to the clicked <code>&lt;li&gt;</code> while display the respective section?</p>
  
  <p>I can't do getElementById or so. So, I need something like this structure:</p>
  
  <pre><code>$("li.presentation").on("click", function(event) { ...
      $(...).class("active");
      $(...).toggle();
  };
  </code></pre>
  
  <p>All help appreciated!</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a href="#tab1"&gt;Details&lt;/a&gt;&lt;/li&gt;
      &lt;% unless @annotation.new_record? %&gt;
      &lt;li role="presentation"&gt;&lt;a href="#tab2"&gt;Tags&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a href="#tab2"&gt;Comments&lt;/a&gt;&lt;/li&gt;
      &lt;% end -%&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Sections</p>
  
  <pre><code>&lt;section id="tab1" class="tab1"&gt;
      &lt;p&gt;Section 1 content here &lt;/p&gt;
  &lt;/section&gt;
  &lt;section id="tab2" class="tab2"&gt;
      &lt;p&gt;Section 2 content here &lt;/p&gt;
  &lt;/section&gt;
  &lt;section id="tab3" class="tab3"&gt;
      &lt;p&gt;Section 1 content here &lt;/p&gt;
  &lt;/section&gt;
  &lt;section id="tab3" class="tab3"&gt;
      &lt;p&gt;Section 3 content here &lt;/p&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>This is my css</p>
  
  <pre class="lang-css prettyprint-override"><code>.tab1 {
      display: block;
  }
  
  .tab2 {
      display: none;
  }
  
  .tab3 {
      display: none;
  }
  </code></pre>