title: removeclass addclass multiple selectors
body: <p>I've written a function that works fine, but being new to jquery, I'd like to know if there's a more cleaner way of writting it. Anything advice would help, just trying to learn!</p>
  
  <p>Thanks!</p>
  
  <p>CODE:</p>
  
  <pre><code>function displayContent() {
    var $link1 = $('.row.nav li a.bio');
    var $link2 = $('.row.nav li a.stylist');
    var $link3 = $('.row.nav li a.contact');
    var $content = $('#text-content')
    var $bio = $("#bio");
    var $stylist = $("#stylist");
    var $contact = $("#contact");
    var $overlay = $('.content-overlay');
  
    //link1
    $link1.click(function (e) {
      e.stopPropagation();
      $link2.removeClass('active');
      $link3.removeClass('active');
      $link1.addClass('active');
      $contact.hide();
      $stylist.hide();
      $bio.fadeIn(700);
      $overlay.show();
    });
    //link2
    $link2.click(function (e) {
     //same code here
    });
    //link3
    $link3.click(function (e) {
      //same code here
    });
  
  
    //close overlay/hide content
    $('html').click(function (e) {
      e.stopPropagation();
      $link1.removeClass('active');
      $link2.removeClass('active');
      $link3.removeClass('active');
      $bio.fadeOut();
      $stylist.fadeOut();
      $overlay.fadeOut();
      $contact.fadeOut();
    });
  
  }
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>HTML MARKUP:</p>
  
  <pre><code>    &lt;div class="main-nav pull-left"&gt;
    &lt;ul class="row nav"&gt;
      &lt;li&gt;&lt;a href="#" class="bio"&gt;bio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="stylist"&gt;stylist&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
      &lt;section id="text-content"&gt;
    &lt;div class="row"&gt;
      &lt;div id="bio" style="display: none;"&gt;
  content here
  &lt;/div&gt;
      &lt;div id="stylist" style="display: none;"&gt;
  content here
  &lt;/div&gt;
      &lt;div id="contact" style="display: none;"&gt;
  content here
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>