显示当前点击的div隐藏以前点击的div

下面的代码正在工作，但有一个问题我不明白。当我点击第一个导航链接它显示的div，这是我想要的，但当我点击另一个导航链接它确实显示下一个div如预期但我需要为以前的div（s）隐藏。任何帮助表示赞赏。显示当前点击的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"); 
    }); 
    }); 
});

来源

2010-03-24 ussteele

你可以尝试添加类到div你是显示，然后隐藏与该类元素时你展示新的div（S）。这样的事情：

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

来源

2010-03-24 17:20:28 rosscj2533

肯定比我的回答更清洁。有趣的是，这是我在我编写的几个插件中所做的。：P – 2010-03-24 17:23:21

这符合我的需要和预期。谢谢。 rosscj2533 请注意 – ussteele 2010-03-24 17:36:23

如果您采用这种方法，请务必在隐藏它后删除“当前”类。 – 2010-03-24 17:39:22

我一般会通过向<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() {...});

它已经包装了你的整个代码。

来源

2010-03-24 17:18:48

我猜你的标记：

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

希望帮助，乔

来源

2010-03-24 17:19:10

我想你的意思'$（ '＃导航礼'），隐藏（）'。。 '＃navigation'是'ul'。 – 2010-03-24 17:22:04

对不起，我的元素格式不是很好。 UL是嵌套的，因此“#navigation ul”将只针对那些第二级UL（按照惯例通常是子菜单本身）。这样，我们触发了子菜单，当我们点击时显示，当我们点击其他东西时隐藏。 – 2010-03-24 17:38:14

我猜这些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; 
    }); 
    }); 
});

来源

2010-03-24 17:21:31

如果要隐藏/显示的元素是任何元素中的兄弟姐妹，这将工作：

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

来源

2010-03-24 17:24:14

显示当前点击的div隐藏以前点击的div

回答

相关问题