Using Jquery to toggle class based on menu item clicked

Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":

<html>
<body>
    <div class="navbar grid_12">
                <ul>
                    <li class="btn" id="home"><a href="#">Home</a></li>
                    <li class="btn" id="about"><a href="#">About Me</a></li>
                    <li class="btn" id="gallery"><a href="#">Gallery</a></li>
                    <li class="btn" id="resume"><a href="#">Resume</a></li>
                    <li class="btn" id="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>
</body>
</html>

etc..

as for my JQuery coding so far this is where i am after hours of trying different things out

       //Update Content-Container Div 
$(document).ready(function(){
    var $main = $(".content-container");
    var $section = $(".content");

    $("#about").click(function(){
        $main.empty();
        $main.find(".bio");
        $(".bio").show();        
    });

});

Solution

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