title: Change inactive class active class and apply for selected element only
body: <p>in given example I used class .inactive for not selected link element, I want to convert .inactive to .active and apply to active link element, means there will be only one .active in list.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="tab-header clearfix"&gt;
    &lt;ul id="tabs"&gt;
      &lt;li&gt;&lt;a id="tab1"&gt;About the App&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="tab2"&gt;PLO&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="tab3"&gt;Prerequisites&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="tab-container" id="tab1C"&gt;
    tab-container 1
  &lt;/div&gt;
  
  &lt;div class="tab-container" id="tab2C"&gt;
    tab-container 2
  &lt;/div&gt;
  
  &lt;div class="tab-container" id="tab3C"&gt;
    tab-container 3
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.tab-header {
    background: white;
    border-bottom: 1px solid #ededed;
  }
  .tab-header #tabs {
    width: 100%;
    height: 30px;
  }
  .tab-header #tabs li {
    float: left;
    list-style: none;
    width: 30%;
    box-sizing: border-box;
  }
  .tab-header #tabs li a {
    color: #ffffff;
    padding: 0 5px;
    display: block;
    text-decoration: none;
    outline: none;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    cursor: pointer;
    background: blue;
  }
  .tab-header #tabs li a.inactive {
    color: blue;
    background: white;
  }
  .tab-header .tab-container {
    clear: both;
    width: 100%;
    padding-top: 20px;
  }
  </code></pre>
  
  <p>jQuery :</p>
  
  <pre><code>$('#tabs li a:not(:first)').addClass('inactive');
                  $('.tab-container').hide();
                  $('.tab-container:first').show();
  
                  $('#tabs li a').click(function(){
                      var t = $(this).attr('id');
                      if($(this).hasClass('inactive')){ //this is the start of our condition 
                      $('#tabs li a').addClass('inactive');           
                      $(this).removeClass('inactive');
  
                      $('.tab-container').hide();
                      $('#'+ t + 'C').fadeIn('slow');
                   }
                  });
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/alpeshlahad/dtfbfqbd/3/" rel="nofollow">JSFiddle Here</a></strong></p>