Question

我有一个带有<ul＆gt; s的简单菜单，每个ul都会将其内容加载到div中，点击它。
这是我的代码：http://jsfiddle.net/EPvGf/41。
首先你打开页面，你可以看到默认内容（第一个div）淡入，我希望它不淡入，只是加载，因为它没有动画（JUST为第一个div（默认的））。
这是我的jQuery代码：

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        if($(this).closest('li').hasClass('current')) return;
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
    }).find('a:first').click();
});

Answer 1

将此添加到您的CSS：

.pbox {display:none}
#div1 {display:block}

并删除触发器

FIDDLE

Answer 2

将您的jQuery更改为：

$(document).ready(function () {
    $('.pbox:gt(0)').hide();
    $('#menu').on('click', 'a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
    });
});

<强> jsFiddle example

我在结束时删除了.find('a:first').click()，触发了您遇到的问题，并添加了$('.pbox:gt(0)').hide();来隐藏除第一个div之外的所有内容。

Answer 3

您可以使用变量来确定fadeIn / fadeOut时间，如下所示：

$(document).ready(function () {
    var fadeTime = 0;
    $('#menu').on('click', 'a', function () {
        if($(this).closest('li').hasClass('current')) return;
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(fadeTime);
        // fade in new selected subcontent
        $('.pbox[id=' + $(this).attr('data-id') + ']').show(fadeTime);
        fadeTime = 600;
    }).find('a:first').click();
});

首次通话时，fadeTime将为零，此后为600。

与问题中的原始代码一样，这样做的优点是不需要在第一个选定元素上设置“当前”的单独机制。

修改

要使其发挥作用，您还应该从HTML中删除class="current"。

Fiddle

jQuery - 将内容加载到div onclick，show（）和hide（）

3 个答案:

修改