Showing content based on a nav link clicked

Question

I have a menu selection that looks like this:

    
About

        

Answer 1

This solution assumes that the a elements will only have a single class.

$('.menu li a').click(function (e) {
    e.preventDefault();
    $(".wrapper,.misc,.content,.about").hide(); // Hide all.
    $("." + this.className.slice(0,-3)).show(); // Show one based on the class
});

It binds the same handler to all the a elements.

When clicked, it hides all the targeted elements, and then slices away the "Nav" from the .className to create a selector to choose the one to display.

Not sure what .wrapper does, since it's not in your HTML.

Answer 2

A more efficient way would be to add the same class to all links and another class to all 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) {
  // this assumes that you really must select
  // the content using a class and not an ID (which you've 
  // referenced in the href)
  $content.hide().filter('.' + type).show();
}

$('.menu').on('click', '.menu-btn', function(e) {
  // get the type to pass to showContent by grabbing
  // the hash from the anchor href and removing the first
  // character (the #)
  showContent(e.currentTarget.hash.slice(1));
  e.preventDefault();
}); 

// show 'about' content only on page load (if you want)
showContent('about');

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

------------------------------------- EDIT -------------------------------------

I have just seen your edit with a link to your pastebin. If there is only one content item for each nav item then you 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 only on page load (if you want)
showContent('#about');

This would be much better as it would mean the navigation would still jump to the relevant content if JS was disabled or failed to download for any reason.

Answer 3

$(".menu").children().click(function(){
    $(".menu").children(function(){
        $("."+$(this).attr("class").replace("Nav","")).hide();
    })
    $("."+$(this).attr("class").replace("Nav","")).show();
})

This would be a universal solution, considering that you can have any menu item with class "someItemNav"; if it's clicked any items are hidden and only "someItem" is shown.

Answer 4

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();    
})