将内容加载到一个 div 中，默认一个答案

【问题标题】：Load content into a div, default one将内容加载到一个 div 中，默认一个
【发布时间】：2013-06-12 15:51:49
【问题描述】：

我有一个带有<ul>s 的简单菜单，每个 ul 将其内容加载到单击它的 div 中。我正在尝试将访问者打开页面时要加载的默认内容设置为 ID 为 div1 的内容，而不是现在的所有内容（div1 + div2 + div3 + div4）。这是我的代码：http://jsfiddle.net/EPvGf/ 打开页面就可以看到

First Div
Second Div
Third Div
Fourth Div

已加载我只想将First Div 作为默认内容加载。

【问题讨论】：

标签： jquery

【解决方案1】：

更新了你的小提琴：http://jsfiddle.net/EPvGf/1/

$(document).ready(function()
{
    $('#menu').on('click','a',function()
    {
        // fade out all open subcontents
        $('.pbox:visible').fadeOut();
        // fade in new selected subcontent
        $('.pbox[id='+$(this).attr('data-id')+']').fadeIn();
    }).find('a:first').click();
});

实际上，我所做的只是在页面加载时单击第一个a。又快又脏。

加载时隐藏.pboxes：添加到css .pbox { display:none; }。小提琴：http://jsfiddle.net/EPvGf/8/

【讨论】：

但它会全部加载它们然后淡入第一个，我希望它在第一个不加载整个内容的情况下淡入你首先加载页面
然后将.pbox { display:none; }添加到你的css中。
您好，只是一个小问题：我怎样才能对其他 div 执行相同的操作？如果可能的话，通过它的ID。（例如，我想默认加载第二个 div 的内容，我已将 a 标签的 ID 设置为 ship）jsfiddle.net/9kYXZ
@hims056 find('a:first') 是第一个主播。 find('a:eq(1)') 是第二个锚。 find('a:eq(2)') 是第三个锚点，依此类推。通过 id 进行操作：find('a#ship') 将选择该锚点。

【解决方案2】：

隐藏文档就绪事件的所有 div 并仅显示第一个（您要显示的默认值）。要显示获取第一个，您可以在集合上使用 first 方法

$(document).ready(function()
{
    $('.pbox:visible').fadeOut();
    $('.pbox').first().fadeIn();

    //your other click event code goes here
});

工作样本：http://jsfiddle.net/EPvGf/6/

【讨论】：

但它会全部加载它们然后淡入第一个，我希望它在第一个不加载整个内容的情况下淡入第一个加载页面
@user2401856：您可以更新您的 HTML/CSS 以在页面加载时显示所有/任何您想要的内容。

【解决方案3】：

你也可以添加一些css：

.pbox { display:none; }
.in { display: block; }

并更改html：

<div class="pbox in" id="div1">First Div</div>

【讨论】：

【解决方案4】：

使用此代码：

$(document).ready(function()
{
    $('#div1').fadeIn();
    $('#menu').on('click','a',function()
    {
        // fade out all open subcontents
        $('.pbox:visible').fadeOut();
        // fade in new selected subcontent
        $('.pbox[id='+$(this).attr('data-id')+']').fadeIn();
    });
});

并将这条规则添加到您的样式中：

.pbox {display: none;}

【讨论】：

Woa 3 个答案，同时输入我的 :)