title: How to use a button to move between tabs in bootstrap
body: <p>I'm using tabs in bootstrap:</p>
  
  <pre><code>&lt;ul class="list-group" id="guide-tabs"&gt;
    &lt;li class="list-group-item active"&gt;&lt;a href="#link1"  data-toggle="tab"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="list-group-item"&gt;&lt;a href="#link2"  data-toggle="tab"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
     &lt;div class="col-sm-8 tab-pane active" id="link1&gt;Link 1 content &lt;/div&gt;
     &lt;div class="col-sm-8 tab-pane active" id="link2&gt;Link 2 content &lt;/div&gt;         
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine to switch tabs based on links in the <code>#guide-tabs</code> list.</p>
  
  <p>I now want to add a button in the <code>#link1</code> content to move to the next tab:</p>
  
  <pre><code> &lt;div class="col-sm-8 tab-pane active" id="link1&gt;
      Link 1 content
      &lt;a href="#link2" class="btn btn-default" data-toggle="tab"&gt;Link 2&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This code will move the tab on, but the <code>active</code> class in the list group doesn't change. What am I missing?</p>