顯示當前點擊的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

回答

相關問題