show current clicked div hide previous clicked div

The code below is working, but with a problem I do not understand. When I click on first navigation link it is showing the div, this is what I want,开发者_运维知识库 but when I click on another nav link it does show the next div as expected but I need for the previous div(s) to hide. any help is appreciated.

something like: if this is not the nav link that was clicked hide. I would think.

$(document).ready(function(){

  $('#navigation a').click(function (selected) {

    var getName = $(this).attr("id");
    var projectImages = $(this).attr("name");

    //console.log(getName);
    //console.log(projectImages);

    $(function() {     
      $("#" + projectImages ).show("normal");
    });
  });
});

You could try adding a class to the div you are showing, and then hiding elements with that class when you show the new div(s). Something like this:

$(document).ready(function(){ 

  $('#navigation a').click(function (selected) { 

    var getName = $(this).attr("id"); 
    var projectImages = $(this).attr("name");

    $(function() {      
      $(".current").hide().removeClass("current");
      $("#" + projectImages ).show("normal").addClass("current");
    }); 
  }); 
}); 

I would generally achieve this functionality by assigning a class to a <div> that wraps all of the images that need to be hidden. Then, upon every click, hide the appropriate div and show what you need:

$(document).ready(function(){
  $('#navigation a').click(function (selected) {

    var getName = $(this).attr("id");
    var projectImages = $(this).attr("name");

    $('div.special_images').hide();
    $("#" + projectImages ).show("normal");
  });
});

Also, you shouldn't need to wrap your projectImages show code with:

$(function() { ... });

It is a shortcut for the code you have above:

$(document).ready(function() {...});

which already wraps the entirety of your code.

If the elements you're hiding/showing are siblings inside any element, this will work:

$(function(){
  $('#navigation a').click(function () {
    $("#" + $(this).attr("name")).siblings().hide().end().show("normal");
  });
});

I'm guessing at your markup:

<ul id='navigation'>
    <li><a href='#' id='nav1' name='nav1menu'>Link 1</a><ul id='nav1menu'>...</ul></li>
    <li><a href='#' id='nav2' name='nav2menu'>Link 2</a><ul id='nav2menu'>...</ul></li>
    <li><a href='#' id='nav3' name='nav3menu'>Link 3</a><ul id='nav3menu'>...</ul></li>
</ul>

Your question asks about the "last" click, but the end of the question seems to imply that all other menus should be closed. In that case:

$(document).ready(function(){

  $('#navigation a').click(function (selected) {

    var getName = $(this).attr("id");
    var projectImages = $(this).attr("name");

    //console.log(getName);
    //console.log(projectImages);

    $(function() {
      $('#navigation ul').hide();
      $("#" + projectImages ).show("normal");
    });
  });
});

Notice that we hide all ULs before we click.

Hope that helps, Joe

I'm guessing these divs aren't part of the navigation. Keep track of the last one opened and hide it before showing the next.

var = previousProjectImage = "";

$(document).ready(function(){

  $('#navigation a').click(function (selected) {

    var getName = $(this).attr("id");
    var projectImages = $(this).attr("name");

    //console.log(getName);
    //console.log(projectImages);

    $(function() {
      if(previousProjectImage != "") {
        $("#" + previousProjectImage).hide();
      }    
      $("#" + projectImages ).show("normal");
      previousProjectImage = projectImages;
    });
  });
});