jQuery показать div при нажатии, скрыть остальные

Question

Мне бы хотелось, чтобы на моей странице была текстовая область, в которой отображается элемент div и скрываются остальные (скажем, 8 других элементов div). При нажатии я бы хотел, чтобы выбранный div отображался, а текущий div и другие div скрывались. Есть ли простое решение для этого? Можно построить из: показать текущий нажатый div скрыть предыдущий нажатый div ?

Answer 1

Вот простое решение, использующее методы объединения в цепочку.

$("input").click(function () 
{
    $("#" + $(this).attr("class")).show().siblings('div').hide();
});

Пример jsFiddle ( с использованием $ ("input") )
Пример jsFiddle ( с использованием $ (". ClassName") )

Активирующие кнопки могут иметь тот же class, что и id затронутых div, или вы можетеиспользуйте отдельный класс "toggler".

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

Наконец, если переключение divs не являются братьями и сестрами, вы можете установить селектор всех из них с помощью var divs = $("#blah1, #blah2, #blah3, ..."); и переключать их с помощью .not().

jsFiddle пример из nonпереключение между братьями и сестрами divs с использованием .not()

Answer 2

Как насчет этого?

$(document).ready( function(){
  $('div.some_class').click( function(){ // set of divs to be clickable
    $(this).siblings('div').hide(); // it's already showing, right?
  });
});

Конечно, если щелкнуть один из них, а остальные спрятаны, вы не сможете вернуть их ...

Answer 3

это зависит от структуры DOM. Я бы лично дал им несколько уроков, чтобы иметь легкий доступ ко всей группе. $('.div-group').hide(0, function(){$('#my-div').show();});

Подумайте об использовании jQuery UI Accordion, который может быть ответом на необходимые вам функции.