показать текущее нажатие div скрыть предыдущее нажатие div

Question

Код ниже работает, но с проблемой я не понимаю. Когда я нажимаю на первую навигационную ссылку, она показывает div, это то, что я хочу, но когда я нажимаю на другую навигационную ссылку, он показывает следующий div, как и ожидалось но мне нужно, чтобы предыдущий div скрылся. любая помощь приветствуется.

что-то вроде: если это не навигационная ссылка, по которой щелкнули, скрыть Я бы подумал.

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

Answer 1

Вы можете попытаться добавить класс в div, который вы показываете, а затем скрыть элементы с этим классом, когда вы показываете новые div (ы). Примерно так:

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

Answer 2

Если элементы, которые вы скрываете / показываете, являются братьями и сестрами внутри какого-либо элемента, это будет работать:

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

Answer 3

Я предполагаю, что эти div не являются частью навигации.Следите за последним открытым и скрывайте его перед отображением следующего.

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

Answer 4

Я думаю, на вашей разметке:

<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>

Ваш вопрос спрашивает о «последнем» щелчке, но конец вопроса, похоже, подразумевает, что все остальные меню должны быть закрыты. В этом случае:

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

Обратите внимание, что мы скрываем все UL перед тем, как щелкнуть.

Надеюсь, это поможет, Джо

Answer 5

Я бы обычно достигал этой функциональности, назначая класс <div>, который оборачивает все изображения, которые необходимо скрыть. Затем при каждом нажатии скрывайте соответствующий div и показывайте, что вам нужно:

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

Кроме того, вам не нужно переносить код показа ProjectImages на:

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

Это код для кода выше:

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

, который уже охватывает весь ваш код.