Question

我是jQuery的新手，我已经遇到了一个障碍！第一次生病了我的文件以及我希望实现的目标。

我有一组按钮（6），它们使用.fadeIn事件在内容中调用内容。加载文档时，初始div是可见的，其他5个使用<div style="display:none".....>隐藏。

我需要帮助的是如何使用每个按钮上的.click功能来隐藏所有div exect用户点击的那个。我希望这是有道理的。据我所知，我的代码看起来就像这样：

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

这是成功显示“＃my1stdiv”但在此之后，我不知道如何编码，当我点击“＃my2ndbutton”时，操作会隐藏“＃my1stdiv”并显示“＃my2nddiv”等等。

请帮忙。否则我很喜欢jQuery ...

问候

Answer 1

首先，您需要提供元素类和ID。这意味着您可以一次选择多个元素。因此，您的链接可以包含课程button，而您的div元素可以包含课程section。

您还应该知道，在事件处理程序中，变量this是被单击的元素。

首先，我们将找到可见的类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

试试这个......

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

你也可以在div上做.hide（）

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

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

或者你需要的是UI accordion？

单击多个div和元素上的事件

4 个答案: