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

下面的代码是有效的，但有一个问题，我不明白。 当我点击第一个导航链接它显示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。 然后，每次点击，隐藏相应的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

如果您隐藏/显示的元素是任何元素中的兄弟，这将起作用：

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

Answer 4

我猜你的标记：

 
 
Link 1
...
 
Link 2
...
 
Link 3
...
  

您的问题询问“最后”点击，但问题的结尾似乎暗示应关闭所有其他菜单。 在这种情况下：

 $(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不是导航的一部分。 跟踪最后一个打开并隐藏它然后显示下一个。

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