Using Jquery to toggle class based on menu item clicked

Question 1

Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed

<div class="navbar grid_12">
    <ul>
        <li class="btn" id="home"><a href="#">Home</a></li>
        <li class="btn" id="about" data-target=".bio"><a href="#">About Me</a></li>
        <li class="btn" id="gallery" data-target=".gallery"><a href="#">Gallery</a></li>
        <li class="btn" id="resume"><a href="#">Resume</a></li>
        <li class="btn" id="contact" data-target=".contact"><a href="#">Contact Me</a></li>
    </ul>
</div>
<div class="content-container">
    <div class="bio content">
        About me content
    </div>
    <div class="contact content">
        Contact me content
    </div> 
    <div class="gallery content">
        gallery content
    </div>
</div>

then

$(document).ready(function () {
    var $main = $(".content-container");
    var $section = $(".content").hide();

    $(".navbar li.btn").click(function (e) {
        e.preventDefault();
        $section.hide();
        var target = $(this).data('target');
        if(target){
            $section.filter(target).show();
        }
    });

});

Demo: Fiddle

Question 2

Check out jquery tabs, I think you need this.

    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#tabs" ).tabs();
      });
      </script>
    </head>
    <body>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Home</a></li>
        <li><a href="#tabs-2">About Me</a></li>
        <li><a href="#tabs-3">Gallery</a></li>
        <li><a href="#tabs-4">Resume</a></li>
        <li><a href="#tabs-5">Contact Me</a></li>
      </ul>
      <div id="tabs-1">
        <p>Home content</p>
      </div>
      <div id="tabs-2">
        <p>About me content</p>
      </div>
      <div id="tabs-3">
        <p>Gallery content </p>
      </div>
       <div id="tabs-4">
        <p>Resume content </p>
      </div>
       <div id="tabs-5">
        <p>Contact Me content </p>
      </div>
    </div>
    </body>
</html>

Question 3

Try:

Assuming ids are associated with relevant classes.

HTML:

<li class="btn" id="bio"><a href="#">About Me</a></li>

JS:

$(".btn").click(function () {
    $(".content-container .content").hide();
    $(".content-container").find("."+$(this).attr("id")).show();    
});

DEMO here.

Question 4

Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.

var $main = $(".content-container");
var $section = $(".content");
$section.hide();

$("li.btn").on('click', function() {
    var link_id = $(this).attr('id');
    var content = $main.find("." + link_id);
    $section.hide();
    content.show();
})

Working Example

Question 5

const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);

$(function() {
   hideEls(containers);
});

function hideEls (els) {
  if (Array.isArray(els)) {
    els.forEach(el => {
      el.style.display = 'none';
    });
  }
  return;
}

function showEl (els, i, e) {
  e.preventDefault();
  hideEls(els);
  els[i].style.display = 'block';
}

links.forEach((link, i) => {
  link.addEventListener('click', showEl.bind(null, containers, i));
});

Here's a fiddle