События кликов на множественных элементах и ​​элементах

Question

Я новичок в jQuery, и я попал в блок !, 1-й плохо расскажу мне документ и то, что я надеюсь достичь.

У меня есть набор кнопок (6), которые вызывают разныеdiv с содержимым с использованием события .fadeIn.когда документ загружается, начальный div виден, а остальные 5 скрыты с помощью <div style="display:none".....>.

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

$(document.ready(function() {
    $("#my1stbutton").click(function() {
        $("#my1stdiv").fadeIn();
    });
});

это успешно показывает "# my1stdiv", но после этого я не знаю, как кодировать так, что когда я нажимаю "# my2ndbutton"action скрывает "# my1stdiv" и отображает "# my2nddiv" и т. д.

Пожалуйста, помогите.В противном случае я люблю jQuery ...

regards

Answer 1

Во-первых, вам нужно указать классы элементов, а также идентификаторы.Это означает, что вы можете выбрать несколько элементов за один раз.Таким образом, ваши ссылки могут иметь класс button, а ваши div элементы - класс section.

. Вы также должны знать, что в обработчике событий переменная this - это элемент, по которому щелкнулиon.

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

$(document).ready(function(){
    $('.button').click(function() { // when a button is clicked
        $('.section:visible').fadeOut(); // hide the visible section
        $('.section').eq($(this).index()).fadeIn(); // show the section that has the equivalent position in the set to the link 
    });
});

Answer 2

или, может быть, вам нужно пользовательский интерфейс ?

Answer 3

Попробуйте

$('button').click(function(){
    $(this).parent('div').fadeIn();
    $('div').not($(this).parent('div')).toggle('fast');
});

РЕДАКТИРОВАТЬ:

$('button').click(function(){
    var index = $('button').index(this);
    $('div').eq(index).fadeIn();
    $('div').not('nth-child:' + index - 1).toggle('fast');  //0 To 1 based
});

Answer 4

попробуйте это ...

$("#button1").click(){
    $("#div1").fadeIn();
    $("#div2").css("display", "none");
    $("#div3").css("display", "none");
    ..all other divs you want to hide
});

вы также можете сделать .hide () на divs

$("#button1").click(){
    $("#div1").fadeIn();
    $("#div2").hide();
    $("#div3").hide();
    ..all other divs you want to hide
});