title: Button to Trigger Nav-Tab with Twitter Bootstrap
body: <p>This button triggers the next tab to load content, but the tab itself does not switch, it remains on the first tab..</p>
  
  <pre><code>&lt;br&gt;&lt;a class="btn btn-primary" href="#tab2" data-toggle="tab"&gt;Review&lt;/a&gt;&lt;br&gt;
  </code></pre>
  
  <p>Here is the code for nav nav-tabs:</p>
  
  <pre><code>  &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Shipping&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Quantities&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tab3" data-toggle="tab"&gt;Summary&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>ANY SOLUTION <em>for switching both the tab&amp;content</em> IS APPRECIATED</p>
  
  <p>..perhaps a way to change the button to trigger the <code>next()</code> function in  * bootstrap-tab.js v2.3.1:</p>
  
  <pre><code>  , activate: function ( element, container, callback) {
        var $active = container.find('&gt; .active')
          , transition = callback
              &amp;&amp; $.support.transition
              &amp;&amp; $active.hasClass('fade')
  
        function next() {
          $active
            .removeClass('active')
            .find('&gt; .dropdown-menu &gt; .active')
            .removeClass('active')
  
          element.addClass('active')
  
          if (transition) {
            element[0].offsetWidth // reflow for transition
            element.addClass('in')
          } else {
            element.removeClass('fade')
          }
  
          if ( element.parent('.dropdown-menu') ) {
            element.closest('li.dropdown').addClass('active')
          }
  
          callback &amp;&amp; callback()
        }
  
        transition ?
          $active.one($.support.transition.end, next) :
          next()
  
        $active.removeClass('in')
      }
    }
  </code></pre>