title: Bootstrap nav-tabs with progress bar
body: <p>I am building a registration system and I have a progress bar and a bootstrap nav-tabs in that page.
  I am trying to setup the JQuery so that the progress bar advances with the nav-tabs. Here is a visual.</p>
  
  <p><img src="https://i.stack.imgur.com/hSG4b.png" alt="enter image description here"></p>
  
  <p>I tried to come up with a simple if else conditional jquery using hasClass and addCLass functions but never got to make a dent. </p>
  
  <p>Something like this:</p>
  
  <pre><code>$(document).ready(function () {
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       if (".nav-tabs") hasClass(".active"); {
         $(".checkout-bar li").addClass("active");
       }
     });
  });
  </code></pre>
  
  <p>I am attaching a <a href="http://codepen.io/anon/pen/ByNXmM" rel="noreferrer"><strong>CODEPEN</strong></a></p>
  
  <p>Any idea on how to do this client side? I'd rather keep C# out of this one</p>