title: How do i make one class be active at one time using JQuery?
body: <p>Code:</p>
  
  <pre><code>var $anchors = $(".box_one, .box_two");
  
  $(document).on('click', function (e) {
      var $elem = $(e.target);
      if ($elem.hasClass('box_one') || $elem.hasClass('box_one_active')) {
          $elem.toggleClass('box_one box_one_active');
          $anchors.not($elem).addClass('box_two').removeClass('box_two_active');
      }
      else if($elem.hasClass('box_two') || $elem.hasClass('box_two_active')) {
          $elem.toggleClass('box_two box_two_active');
          $anchors.not($elem).addClass('box_one').removeClass('box_one_active');
      }
      else {
          $('.box_one_active').addClass('box_one').removeClass('box_one_active');
          $('.box_two_active').addClass('box_two').removeClass('box_two_active');
      }
  });
  </code></pre>
  
  <p>In the code above when box_one is clicked box_one_active takes box_one's place and when box_two is clicked box_two_active take's box_two's place.</p>
  
  <p>How do I change the code so that when <code>box_one_active</code> is <strong>active</strong> that <code>box_two_active</code> is also <strong>not active</strong> at the same time.  Meaning, the user has to click one to disable the other and enable one.</p>
  
  <p>How do I do that?</p>