Question

我使用java来点击时淡入淡出div。

如果点击其中的其他三个功能，同时淡化单击的功能，我将如何淡出？

到目前为止，这是代码;

$(document).ready(function() {

$('#about').click(function(about){    
$('#outside, #outside2, #outside3, #outside4, #outside5, #outside6, #outside7, #outside8, #outside9, #outside10, #outside11').fadeToggle('slow');
});

$('#whyus').click(function(whyus){    
$('#outsidewhy, #outsidewhy2, #outsidewhy3, #outsidewhy4, #outsidewhy5, #outsidewhy6, #outsidewhy7, #outsidewhy8, #outsidewhy9, #outsidewhy10, #outsidewhy11').fadeToggle('slow');
});

$('#portfolio').click(function(port){    
$('#outsideport, #outsideport2, #outsideport3, #outsideport4, #outsideport5, #outsideport6, #outsideport7, #outsideport8, #outsideport9, #outsideport10, #outsideport11').fadeToggle('slow');
});

$('#contact').click(function(con){    
$('#outsidecon, #outsidecon2, #outsidecon3, #outsidecon4, #outsidecon5, #outsidecon6, #outsidecon7, #outsidecon8, #outsidecon9, #outsidecon10, #outsidecon11').fadeToggle('slow');
});


});

例如，当单击函数con时，它应淡出函数about，whyus和port，同时淡入con。

另一个例子，点击它的函数将淡出函数whyus，port和con，同时淡入大约被点击。

Answer 1

首先，不要害怕上课。

例如，为每个子项目提供class="outside"

类

然后，还为4个功能项中的每一个提供一个唯一的类。例如，将#outside, #outside2, #outside3....所有类class="outside1"

提供给您

和您的#outsidewhy, #outsidewhy2 ...所有class="oustside2"

类

然后为您的所有顶级点击链接提供class="click-link"

类

然后您需要做的就是

$('.click-link').click(function() {

    var whichone = $(this).attr('id'); // gets the id of the click-link that was clicked

    $('.outside').fadeOut(800); // this fades out them all

    if (whichone === 'about') {

        $('.outside1').fadeIn(800); // but this will fadein the ones that you want, depending on which link was clicked

    }

    else if (whichone === 'whyus') {

        $('.outside2').fadeIn(800);

    }

    etc

    etc

});

Answer 2

Working fiddle

远非完美答案，我们将非常感谢您的改进

的jQuery

$(document).ready(function () {
    $('#about').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outside').fadeOut('fast');
        $('#outside').fadeIn('slow');
    });
    $('#whyus').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsidewhy').fadeOut('fast');
        $('#outsidewhy').fadeIn('slow');
    });
    $('#portfolio').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsideport').fadeOut('fast');
        $('#outsideport').fadeIn('slow');
    });
    $('#contact').click(function (e) {
        e.preventDefault();
        $('.notme').not('#outsidecon').fadeOut('fast');
        $('#outsidecon').fadeIn('slow');
    });
});

单击一个时使用javascript淡出元素？

2 个答案: