показать текущий щелчок div скрыть предыдущий щелчок div

Question

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

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

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

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

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