javascript - Showing content based on a nav link clicked -

i have menu selection looks this:

<ul class = "menu">     <li><a href="#about" class="aboutnav">about</a></li>     <li><a href="#contact" class="contactnav">contact</a></li>     <li><a href="#misc" class="miscnav">misc</a></li> </ul> 

i'm trying make content associated each of these links show on click , hide other content. js i'm using looks follows:

$('.menu li .aboutnav').click(function (e) {    e.preventdefault();    $('.wrapper').hide();    $('.misc').hide();    $('.contact').hide();    $('.about').show();}); 

i want have function each menu element, isn't working elements in menu. i've looked @ other threads same problem i'm having none of them seem directly apply way i'm doing it.

i started learning html, js, css going wrong way , that's why other threads haven't helped.

edit: here's pastebin of of html http://pastebin.com/fjcnxgky

a more efficient way add same class links , class content items...

html:

<ul class="menu">   <li><a href="#about" class="menu-btn">about</a></li>   <li><a href="#contact" class="menu-btn">contact</a></li>   <li><a href="#misc" class="menu-btn">misc</a></li> </ul>  <div class="menu-content about">about</div> <div class="menu-content contact">contact</div> <div class="menu-content misc">misc</div> 

javascript:

var $content = $('.menu-content');  function showcontent(type) {   // assumes must select   // content using class , not id (which you've    // referenced in href)   $content.hide().filter('.' + type).show(); }  $('.menu').on('click', '.menu-btn', function(e) {   // type pass showcontent grabbing   // hash anchor href , removing first   // character (the #)   showcontent(e.currenttarget.hash.slice(1));   e.preventdefault(); });   // show 'about' content on page load (if want) showcontent('about'); 

demo on jsbin: http://jsbin.com/hagonesuwo/edit?html,js,output

------------------------------------- edit -------------------------------------

i have seen edit link pastebin. if there 1 content item each nav item can use ids instead...

html:

<ul class="menu">   <li><a href="#about" class="menu-btn">about</a></li>   <li><a href="#contact" class="menu-btn">contact</a></li>   <li><a href="#misc" class="menu-btn">misc</a></li> </ul>  <div id="about" class="menu-content">about</div> <div id="contact" class="menu-content">contact</div> <div id="misc" class="menu-content">misc</div> 

javascript:

var $content = $('.menu-content');  function showcontent(selector) {   $content.hide();   $(selector).show(); }  $('.menu').on('click', '.menu-btn', function(e) {   showcontent(e.currenttarget.hash);   e.preventdefault(); });   // show '#about' content on page load (if want) showcontent('#about'); 

this better mean navigation still jump relevant content if js disabled or failed download reason.