1

我有一个带有<ul>s 的简单菜单，每个 ul 将其内容加载到单击它的 div 中。
这是我的代码：http: //jsfiddle.net/EPvGf/41。
第一次打开页面时，您可以看到默认内容（第一个 div）淡入，我希望它不会淡入，只是在没有动画的情况下加载（仅适用于第一个 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();
});
4

3 回答 3

5

将此添加到您的 CSS 中：

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

并移除触发器

小提琴

于 2013-06-13T22:27:32.873 回答
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 示例

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

于 2013-06-13T22:26:54.733 回答
1

您可以使用变量来确定淡入/淡出时间，如下所示：

$(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。

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

编辑

要完成这项工作，您还应该class="current"从 HTML 中删除。

小提琴

于 2013-06-13T22:31:52.140 回答