title: Bootstrap 3 Tabs Not Switching Active State Properly
body: <p>I have this bit of code - just tabbed panels with separate graphs in each tabbed panel. When I switch tabs the content is not loading correctly. The active state of the panel is not changing when I click another tab, can you help a brotha figure this out?   </p>
  
  <pre><code>&lt;div class="col-sm-6"&gt;
      &lt;!-- Tabs --&gt;
      &lt;ul class="nav nav-tabs" role="tablist"&gt;
          &lt;li class="active"&gt;&lt;a href="#DailyIncome" role="tab" data-toggle="tab"&gt;Daily Income&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#YearlyIncome" role="tab" data-toggle="tab"&gt;Yearly Income&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Clients" role="tab" data-toggle="tab"&gt;Clients&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Orders" role="tab" data-toggle="tab"&gt;Orders&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- Content --&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane fade in active" id="DailyIncome"&gt;
              &lt;div id="DailyIncomeChart" class="DailyIncomePanel"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane fade" id="YearlyIncome"&gt;
              &lt;div id="YearlyIncomeChart" class="YearlyIncomePanel"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane fade" id="Clients"&gt;&lt;/div&gt;
          &lt;div class="tab-pane fade" id="Orders"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>