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

我通常会通过将类分配给包含所有需要隐藏的图像的<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() {...});

已经包含了整个代码。

Answer 3

我猜你的标记：

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

我猜这些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 5

如果你隐藏/展示的元素是任何元素中的兄弟，那么这将起作用：

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

显示当前点击的div隐藏上一个点击的div

5 个答案: