Showing content based on a nav link clicked

Question

I have a menu selection that looks like this:

    
About         


        

Answer 1

You have a couple of problems with your JS:

• you select items by class .misc instead of ID #misc

• the way you coded the click is very rigid. Make it more elastic like:

  $('.menu').on('click', 'li', function (e) {
      $('article').hide();
      var id = $(this).find('a').attr('href'); // $(this) is the clicked LI
      $(id).show();    
  })
  

I assume all items with IDs #about, #contact etc. are simply article HTML elements and I hide them all before showing the right one. Hope this helps.

EDIT

Or even a bit more elegant hiding the other contents:

$('.menu').on('click', 'li', function (e) {
    var id = $(this).find('a').attr('href');
    $(id).show().siblings().hide();    
})